html2canvas图片跨域问题

使用画图 页面上链接图片报了跨域问题，控制台报跨域问题

解决方法

<img :src="detailInfo.avatarUrl" class="avatarUrl" crossorigin="anonymous"/>

// 生成二维码
    getCode() {
      const text = this.detailInfo.shareLink
      const canvas = document.getElementById('businessCardCanvas')
      QRCode.toCanvas(
        canvas,
        text,
        {
          toSJISFunc: QRCode.toSJIS,
          width: 150,
          height: 150,
          correctLevel: 'H'
        },
        function (error) {
          if (error) console.error(error)
        }
      )
      let imgs = document.getElementById('imgs')
      if(imgs){
        imgs.appendChild(Canvas2Image.convertToImage(canvas, 150, 150, 'png'))
        this.$nextTick(() => {
          this.businessCardImg = imgs.querySelector('img').getAttribute('src')
          this.$emit('getImgSrc', this.businessCardImg)
        })
      }
    }

重点：

1. img标签的crossorigin=“anonymous”
2. useCORS: true
   以上2个属性缺一不可

方式二：
将图片转成base64格式也能解决

    urlToBase64(url) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 将图片插入画布并开始绘制
          canvas.getContext("2d").drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL("image/png");
          resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin", "Anonymous");
        image.src = url;
        // 图片加载失败的错误处理
        image.onerror = () => {
          reject(new Error("urlToBase64 error"));
        };
      });
    }

使用：

  const imgUrL = this.detailInfo.avatarUrl
      this.urlToBase64(imgUrL).then((res) => {
        // 使用转化后的base64图片地址，不然会产生跨域问题
        this.imgUrL = res
      });