如何解决使用html2canvas时出现的‘Tainted canvas’错误？

这个错误的核心原因是：你要截图的#Display区域里包含了跨域来源的图片/字体资源，浏览器同源策略会标记这类canvas为"污染"状态，禁止导出为DataURL。

解决方案1：给跨域资源添加CORS支持 #

如果资源是你可控的，或者第三方平台支持CORS，直接给资源标签添加crossorigin="anonymous"属性：

<!-- 示例：给img标签添加CORS属性 -->
<img src="第三方域名图片地址" crossorigin="anonymous">
<!-- 示例：给引入的字体样式添加CORS属性 -->
<style>
@font-face {
  font-family: '第三方字体';
  src: url('第三方域名字体地址') format('woff2');
  crossorigin: anonymous;
}
</style>

同时调用html2canvas时，开启useCORS配置：

html2canvas(document.querySelector("#Display"), { useCORS: true }).then(canvas => {
  const downloadLink = document.createElement("a");
  downloadLink.href = canvas.toDataURL("image/png");
  downloadLink.download = "页面截图.png"; // 建议添加文件名，优化用户体验
  downloadLink.click();
});

解决方案2：通过代理转发跨域资源 #

如果第三方资源不支持CORS，需要在自己的服务器搭建代理接口，将跨域资源转为同域资源后再加载。比如后端写一个接口接收资源URL参数，返回资源内容，前端通过这个接口加载：

<!-- 示例：通过自有代理接口加载图片 -->
<img src="/api/proxy?url=第三方域名图片地址">

这种方式下资源变为同域，不会触发canvas污染，无需额外配置html2canvas。

解决方案3：排查隐藏的跨域资源 #

部分隐藏资源（如背景图、图标字体）也可能导致污染，可通过浏览器开发者工具的网络面板，筛选图片/字体类资源，检查响应头是否包含Access-Control-Allow-Origin字段，无此字段的即为跨域资源，需按上述方法处理。

内容的提问来源于stack exchange，提问作者Mini Programmer