Question

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

提前致谢。

Answer 1

不是html2canvas问题 - 只是一个安全问题。

如果你真的很幸运......

您可以在下载跨域图片时使用imageObject.crossOrigin='anonymous'。这需要两者服务器和浏览器以允许匿名x域传输。可悲的是，几乎所有服务器和大多数浏览器还没有允许。

<强>替代地

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

<强>替代地

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

Answer 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();
        }
    });

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

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 were the culprits。

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

html2canvas - SecurityError：操作不安全

3 个答案: