vue实现点击按钮复制图片(类似浏览器右键复制)

新需求有点击按钮生成二维码+点击复制二维码的功能，因为二维码是后端php生成的，所以这里我只做点击复制功能就行。
网上找了很多插件和办法，但是不是只能复制文字就是只能复制本地的图片(因为后端生成的图片是http:xxxxx.jpg)。最后找到了个直接调用浏览器自带的复制方法(类似浏览器右键复制图片)

npm i html2canvas //vue项目，首先下载html2canvas
import html2canvas from "html2canvas"; //在页面中引入

<!--页面内容-->
          <div id="QR-code" v-if="!qrState">
            <div id="QR-img">
              <img :src="this.imgUrl" alt="" style="width: 200px; height: 200px" />
            </div>
          </div>

    copyImg() {//点击复制二维码
      html2canvas(document.getElementById("QR-code")).then(async (canvas) => {
        // this.imgUrl = canvas.toDataURL();   //将this.imgurl转为base64图,因为这里后端返回已是base64位图，所以无需此方法
        const data = await fetch(this.imgUrl);
        const blob = await data.blob();
        if (navigator.clipboard == undefined) {  //注:此方法只能在localhost跟https协议下可用,http协议下不存在此方法
          this.$message.error("请在https协议下操作");
        } else {
          this.$message({
            message: "复制成功",
            type: "success",
          });
        }
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ]);
      });
    },