html2canvas - SecurityError：操作不安全

Question

我在我的项目中使用html2canvas.js将我的元素（body）转换为canvas，然后将canvas转换为image。我的元素包含从跨域加载的图像。从元素创建的画布工作完美，但当尝试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。

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