html2canvas - SecurityError：操作不安全答案

【问题标题】：html2canvas - SecurityError: The operation is insecurehtml2canvas - SecurityError：操作不安全
【发布时间】：2013-04-28 14:08:39
【问题描述】：

我在我的项目中使用html2canvas.js 将我的元素（主体）转换为画布，然后将画布转换为图像。我的元素包含从跨域加载的图像。从元素创建的画布工作正常，但是当尝试canvas.toDataURL("image/png"); 时，它会给出错误SecurityError: The operation is insecure 请帮我解决这个问题。当图像未从跨域加载时，canvas.toDataURL("image/png"); 工作正常。

提前致谢。

【问题讨论】：

标签： jquery html canvas html2canvas

【解决方案1】：

不是真正的 html2canvas 问题——只是安全问题。

如果你真的很幸运...

下载跨域镜像时可以使用imageObject.crossOrigin='anonymous'。这需要同时服务器和浏览器允许匿名 x 域传输。可悲的是，几乎所有服务器和大多数浏览器都不允许。

或者

不要跨域...在您自己的网站上提供该图像。

或者

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

【讨论】：

太棒了。我将图像添加到服务器，一切正常。谢谢。

【解决方案2】：

即使我的项目也面临同样的问题。但是，html2canvas 插件没有使用 html2canvasproxy.php（许多网站都建议我这样做），而是有一个默认为 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();
        }
    });

希望这会有所帮助。或者，如果您/任何人有任何其他想法，我会很高兴知道。谢谢。

【讨论】：

【解决方案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 were the culprits。

检查是否有任何选择输入
在截取屏幕截图之前隐藏选择输入并在之后添加它们（使用 jQuery $('.selector').hide(); 和 $('.selector').show();）

【讨论】：