图片是来自于阿里云服务器的,和本地 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官方说明链接