html2canvas截图空白：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header

Access to image at ‘http://10.110.16.96:8080/WBA_E6_X314_2023-11-23_16-40__TF073_0014.png’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
外网链接的图片，页面能显示但 html2canvas截图时是空白，报错显示跨域

主要原因是：

1、如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了, canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，见 Allowing cross-origin use of images and canvas。 所以通过在img标签上设置crossorigin，启用CORS，属性值为 anonymous，在CORS请求时不会发送认证信息,见 HTML attribute: crossorigin。

2、在启用CORS请求跨域资源时，资源必须允许跨域，才能正常返回，最简单的方式设置响应头Access-Control-Allow-Origin

3、图片已经通过img标签加载过，浏览器默认会缓存下来，下次使用js方式再去请求，直接返回缓存的图片，如果缓存中的图片不是通过CORS请求或者响应头中不存在Access-Control-Allow-Origin，都会导致报错。

综上所述，跨域图片能正常裁剪（图片未转化成base64），应该满足三个条件：

1、img元素中设置crossorigin属性

2、图片允许跨域，设置响应头Access-Control-Allow-Origin

3、使用js方式请求图片资源, 需要避免使用缓存，设置url后加上时间戳，或者http头设置Cache-Control为no-cache

正确写法上面的两个链接里有，这里贴出来，方便大家直接看到：

如果是 img 标签

<img crossorigin=“anonymous” :src=“carUrl” alt=“”>
在启用CORS请求跨域资源时，需要图片服务设置允许跨域，否则页面无法显示