html2canvas：无法使用其他来源的图像捕获屏幕截图

Question

当页面包含来自其他来源的图像时，我在使用 html2canvas 捕获当前网页的屏幕截图时遇到问题。尽管使用 Access-Control-Allow-Origin: * 在我的服务器上启用了 CORS 标头，但我仍然收到错误消息“无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

这是我正在使用的代码：

html2canvas(document.body, {
    allowTaint: true,
    useCORS: true,
    type: 'view'
}).then(function (canvas) {
     var dataURL = canvas.toDataURL("image/png");
});

可能导致此错误的原因是什么，如何解决它以成功捕获屏幕截图（包括来自其他来源的图像）？

Answer 1

您遇到的错误可能是由于与跨源内容相关的安全限制造成的。即使使用 CORS 标头，浏览器仍可能阻止从其他来源捕获图像以维护安全性。

一种解决方法是通过您的服务器代理图像，以便它们由与您的 HTML2Canvas 脚本相同的源提供。

另请参阅受污染的画布可能无法导出