html2canvas跨域图片截图失败：已配置CORS仍无法导出画布求助

错误原因 #

你遇到的Tainted canvases may not be exported错误，核心原因是画布被跨域资源污染：

1. 当前代码中allowTaint: true的配置会让html2canvas允许跨域图片污染画布，而浏览器的同源安全机制会禁止导出被污染的画布（比如调用toDataURL），即便服务器配置了CORS头也无法绕过这个限制。
2. 即便开启了useCORS: true，如果页面中的跨域图片没有设置crossorigin属性，浏览器依然会将其视为非CORS资源，加载后还是会污染画布。

解决步骤 #

1. 调整html2canvas配置 #

移除allowTaint: true，仅保留useCORS: true。useCORS的作用是让html2canvas尝试通过CORS方式加载跨域图片，避免画布被污染；而allowTaint是允许画布被污染，两者冲突会触发安全限制。

修改后的代码：

html2canvas(document.body, {
    useCORS: true,
    type: 'view'
}).then(function (canvas) {
     var dataURL = canvas.toDataURL("image/png");
     // 后续处理逻辑
});

2. 给跨域图片添加crossorigin属性 #

页面中所有跨域图片必须设置crossorigin="anonymous"属性，这样浏览器才会以CORS模式加载图片，配合服务器的Access-Control-Allow-Origin: *头，就能避免画布污染。

• 静态图片标签示例：

<img src="https://other-domain.com/image.jpg" crossorigin="anonymous">

• 动态创建图片示例：

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://other-domain.com/image.jpg';

3. 验证服务器CORS配置 #

确认服务器返回的响应头满足以下要求：

• 包含Access-Control-Allow-Origin: *（或指定当前页面域名）
• 对于anonymous模式的请求，确保Access-Control-Allow-Credentials设为false
• 没有限制Access-Control-Allow-Methods或Access-Control-Allow-Headers导致图片加载失败

额外处理方案 #

如果图片源不支持CORS，可通过同域代理服务器转发图片请求，将跨域图片转为同域资源后再加载，从根源上避免跨域问题。

内容的提问来源于stack exchange，提问作者kinjal mistry