一键复制图片

实现方法

代码示例

// 二维码复制
async copyImg(e) {
    var _this = this;
    const img = this.$refs.qrCode.$el;
    const setToClipboard = blob => {
        const data = [new ClipboardItem({ [blob.type]: blob })];
        return navigator.clipboard.write(data);
    };
    try {
        const response = await fetch(img.src);
        const blob = await response.blob();
        setToClipboard(blob);
        _this.$message({
            message: '复制成功',
            type: 'success'
        });
    } catch (error) {
        _this.$message({
            message: '复制失败',
            type: 'error'
        });
    }
}

使用示例

在Vue组件中添加引用并绑定方法：

<template>
  <div>
    <img ref="qrCode" src="path_to_your_qrcode_image" alt="QR Code" />
    <button @click="copyImg">复制二维码</button>
  </div>
</template>

<script>
export default {
  methods: {
    async copyImg(e) {
      var _this = this;
      const img = this.$refs.qrCode.$el;
      const setToClipboard = blob => {
        const data = [new ClipboardItem({ [blob.type]: blob })];
        return navigator.clipboard.write(data);
      };
      try {
        const response = await fetch(img.src);
        const blob = await response.blob();
        setToClipboard(blob);
        _this.$message({
          message: '复制成功',
          type: 'success'
        });
      } catch (error) {
        _this.$message({
          message: '复制失败',
          type: 'error'
        });
      }
    }
  }
};
</script>

参考

• Vue复制图片到剪切板