vue如何复制图片和下载图片

我这边有个需求，是分享某课程的二维码，这个分享有两种形式：可以下载二维码、海报，也可以复制二维码。

二维码生成我使用的是VueQr，是个很方便简单的vue插件，生成的二维码是解析后是一个img标签的图片。

<vue-qr
 ref="Qrcode"
 :dot-scale="1"
  :text="config.value"
  :download="downloadFilename"
  :size="200"
  :margin="0"
  class="qrcode"
/>

其中属性可以查对应文档，不在此赘述。

点击复制按钮的方法，需要先引入

import html2canvas from "html2canvas";

copyImg(e) {
       html2canvas(document.getElementById('QR-code')).then(async (canvas) => {
        this.imgUrl = canvas.toDataURL();
        const data = await fetch(this.imgUrl);
        const blob = await data.blob();

        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
        this.$message({
          message: "复制成功，请粘贴二维码分享",
          showClose: true,
        });
      });
    },

可以直接粘贴到微信qq等软件中。

只下载二维码方法的就比较简单，就是借助a标签，点击下载。

downloadImg() {
      const iconUrl = this.$refs.Qrcode.$el.src;
      let a = document.createElement("a");
      let event = new MouseEvent("click");
      a.download = this.details.name + "二维码";
      a.href = iconUrl;
      a.dispatchEvent(event);
    },

然后是一个海报，

说白了也是借助a标签，不过首先需要让图层生成一个画布。因此引入

import html2canvas from "html2canvas";

submitDown() {
      var opts = {
        scale: 3,
        logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)
        allowTaint: true, // 否允许跨源图像污染画布
        backgroundColor: null, // 解决生成的图片有白边
        useCORS: true, // 如果截图的内容里有图片,解决文件跨域问题
      };
      html2canvas(this.$refs.posterImg, opts).then((canvas) => {
        // this.$refs.addImage.append(canvas);//在下面添加canvas节点
        let link = document.createElement("a");
        link.href = canvas.toDataURL(); //下载链接
        link.setAttribute("download", this.questionInfo.name+".png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });
    },