【Code】利用clipboard 实现图片复制

复制方法实现：

async copyImg(url) {
      this.$message.warning("复制过程中请保持页面聚焦");
      const result = await navigator.permissions.query({ name: 'clipboard-write' });
      if (result.state === 'granted') {
        this.convertImgToBase64(url, async (base64Img) => {
          const data = await fetch(base64Img);
          const blob = await data.blob();
          if (navigator.clipboard == undefined) {
            // 注:此方法只能在localhost跟https协议下可用,http协议下不存在此方法
            this.$message.error("请在https协议下操作");
          }
          navigator.clipboard.write([
            new ClipboardItem({
              [blob.type]: blob,
            }),
          ]).then(() => {
            this.$message({
              message: '复制成功',
              type: 'success'
            });
          }, (error) => {
            this.$message({
              message: '复制失败',
              type: 'error'
            });
            console.error("复制失败", error);
          });
        });
      } else {
        this.$message({
          message: '浏览器不支持，请升级chrome浏览器',
          type: 'warning'
        });
        console.log("复制不支持 " + result);
      }
    },

将图片转换成Base64

convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        callback.call(this, dataURL);
        canvas = null;
      };
      img.src = url;
    }

参考：PC端react实现一键复制图片功能 复制内容到剪贴板 实现复制图片到剪切板 复制图片发送给微信好友