html2canvas导出图片失败？轻松解决“污染画布”难题！
使用html2canvas将网页元素转换为图片非常方便，但有时会遇到令人头疼的“污染画布无法导出”错误，尤其是在处理包含跨域图片的页面时。
错误原因：
这个错误的根源在于安全策略。跨域图片被浏览器视为“污染画布”，阻止html2canvas通过toDataURL()方法导出图片。
解决方案：
立即学习“前端免费学习笔记（深入）”；
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
解决此问题需要服务器端的配合：
- 启用CORS (跨域资源共享): 联系你的CDN服务商，为你的图片资源配置CORS，允许跨域访问。这是最有效且推荐的解决方案。
-
避免使用
allowTaint: 虽然allowTaint选项允许绘制受污染的画布，但这并不能解决跨域问题，只是掩盖了错误，并不推荐使用。
代码调整 (CORS配置后):
配置好CORS后，你的代码可以简化：
<code class="javascript">const opt = {
// 使用跨域（CORS配置后可移除）
useCORS: true,
imageTimeout: 5000 // 设置图片超时时间（可选）
};</code>
通过正确配置CORS，跨域图片将能够正常渲染到canvas上，toDataURL()方法就能顺利导出图片了。 记住，服务器端的CORS配置才是关键！
