vue实现点击复制图片功能

    /* 绘制图片 */
    copyCode(url) {
      const canvas = document.createElement('canvas');
      const image = new Image();
      image.setAttribute('crossOrigin', 'Anonymous'); // 可能会有跨越问题
      image.src = url;      
      image.onload = () => {
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext('2d').drawImage(image, 0, 0); // 加载img到画板
        const url = canvas.toDataURL('image/png'); // 转换图片为dataURL，格式为png
        this.clipboardImg(url); // 调用复制方法
      };
    },
    /* 复制图片 */
    async clipboardImg(url) {
      try {
        const data = await fetch(url);
        const blob = await data.blob();
        await navigator.clipboard.write([
          new window.ClipboardItem({
            [blob.type]: blob
          })
        ]);
        this.$message({
          type: 'success',
          message: '复制成功'
        });
      } catch (err) {
        this.$message({
          type: 'warning',
          message: '复制失败'
        });
      }
    }