vue clipboard复制图片到剪切板

<img :src="require(`@/assets/images/custom.png`)"  ref="image" />
<el-button type="primary" @click="copyImage" >复制</el-button>

import Clipboard from "clipboard";
//将blob格式图片type转化成png，clipboard插件只能复制png类型
async blobToCanvas(blob) {
  const img = new Image();
  img.src = URL.createObjectURL(blob);

  return new Promise((resolve, reject) => {
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const context = canvas.getContext("2d");
      context.drawImage(img, 0, 0);
      resolve(canvas);
    };

    img.onerror = (error) => {
      reject(error);
    };
  });
},
async copyImage() {
  try {
    const image = this.$refs.image;
    const imageUrl = image.src;

    // Fetch the image data
    const response = await fetch(imageUrl);
    const blob = await response.blob();
    const canvas = await this.blobToCanvas(blob);
    const pngBlob = await new Promise((resolve) => {
      canvas.toBlob((b) => resolve(b), "image/png");
    });

    // Write the image data to the clipboard
    await navigator.clipboard.write([
      new ClipboardItem({ "image/png": pngBlob }),
    ]);

    this.$message({
      message: "复制成功",
      showClose: true,
      type: "success",
    });
  } catch (error) {
    console.log(error);
    this.$message({ message: "复制失败,", showClose: true, type: "error" });
  }
},