html2canvas截图丢失img图片

图片是来自于阿里云服务器的，和本地 localhost 必然存在跨域问题。通过 dom 节点的 'img' 标签来直接访问是没有问题，因为浏览器本身不会有跨域问题。

加了 crossorigin 属性，则表明图片就一定会按照 CORS 来请求图片。而通过CORS 请求到的图片可以再次被复用到 canvas 上进行绘制。换言之，如果不加 crossorigin 属性的话，那么图片是不能再次被复用到 canvas 上去的。

解决办法：

1.给img标签加上crossOrigin="anonymous"属性

2. 服务端开启跨域，必须加上字段：response.setHeader("Access-Control-Allow-Origin","*");

3.并且开启CORS

ps:下载时必须要等图片加载完后再截图否则下载会丢失图片

  html2canvas(domNode as HTMLElement, {
      useCORS: true,
      backgroundColor: null,
      scale: 1.5,
      width: 340,
      height: dom === 'wxewm' ? 480 : 401,
    }).then((canvas) => {
      const imgUrl = canvas.toDataURL('image/png', 1.0).replace('image/png', 'image/octet-stream');
      })

 MDN官方说明链接