html2canvas - 安全错误：操作不安全

Question

我在我的项目中使用了 html2canvas.js 将我的元素(body)转换为画布(canvas)，然后将画布转换为图像(image)。我的元素包含从跨域加载的图片。

从元素创建画布(canvas)工作得非常完美，但是当尝试使用canvas.toDataURL("image/png");时，会出现错误SecurityError: The operation is insecure。

请帮我解决这个问题。当图片不是从跨域加载时，canvas.toDataURL("image/png");可以正常工作。

提前致谢。

- mmpatel009

Answer 1

这不是html2canvas的问题，而是一个安全问题。

如果你很幸运的话...

当下载跨域图片时，您可以使用imageObject.crossOrigin='anonymous'。这需要服务器和浏览器都允许匿名x-domain传输。很遗憾，几乎所有的服务器和大多数浏览器都不允许。

或者

不要跨域...将该图像放在自己的网站上。

或者

在json请求中包装图像请求。这是一个执行此操作的脚本：http://www.maxnov.com/getimagedata/

- markE

---

太好了。我已经将图片添加到服务器上并且一切都正常工作了。谢谢。 - Duque

Answer 2

我曾经在我的项目中遇到了同样的问题。但是，与其使用许多网站建议的html2canvasproxy.php，html2canvas插件具有一个内置属性，默认情况下为false，可以在跨域图像之间切换。 useCORS和allowTaint可用于处理跨域图像和解决画布污染问题。

对于跨域图片问题，请使用useCors并将其设置为true。如果您修改了跨域图像（例如将其转换为DataURI），则画布可能会变得污染，html2canvas不会允许这种情况发生。在这种情况下，将allowTaint设置为true将解决问题，并使html2canvas接受您的画布。

一个示例实现：

     html2canvas(document.getElementById('mainImage'), {
        allowTaint:true,
        useCORS:true,
        /*proxy:"lib/html2canvas_proxy/html2canvasproxy.php",*/
        onrendered: function(canvas) {
            var result = canvas.toDataURL();
        }
    });

希望这能帮到您。如果您/任何人有其他想法，我很乐意知道。谢谢。

- Satish Kumar

Answer 3

我曾经遇到过一个非常困难的问题，其他答案都不适用于我，也没有提供解决此错误的步骤。

步骤：

Hide different elements in the container that you are taking a canvas screenshot of
and test whether the error is still thrown.  

最终，我能够确定 select inputs 是罪魁祸首。

1. 检查是否存在任何 select inputs
2. 在截屏之前隐藏 select inputs，并在之后添加回来（使用jQuery $('.selector').hide(); 和 $('.selector').show();）

- codeymcgoo