html2canvas导出图片失败：如何解决“污染画布无法导出”错误？

html2canvas导出图片失败？轻松解决“污染画布”难题！

使用html2canvas将网页元素转换为图片非常方便，但有时会遇到令人头疼的“污染画布无法导出”错误，尤其是在处理包含跨域图片的页面时。

错误原因：

这个错误的根源在于安全策略。跨域图片被浏览器视为“污染画布”，阻止html2canvas通过toDataURL()方法导出图片。

解决方案：

解决此问题需要服务器端的配合：

• 启用CORS (跨域资源共享): 联系你的CDN服务商，为你的图片资源配置CORS，允许跨域访问。这是最有效且推荐的解决方案。
• 避免使用allowTaint: 虽然allowTaint选项允许绘制受污染的画布，但这并不能解决跨域问题，只是掩盖了错误，并不推荐使用。

代码调整 (CORS配置后):

配置好CORS后，你的代码可以简化：

const opt = {
  //  使用跨域（CORS配置后可移除）
  useCORS: true,
  imageTimeout: 5000 // 设置图片超时时间（可选）
};

通过正确配置CORS，跨域图片将能够正常渲染到canvas上，toDataURL()方法就能顺利导出图片了。 记住，服务器端的CORS配置才是关键！