6

I have used html2canvas.js in my project for convert my element(body) into canvas and then convert canvas to image. My element contains images that load from cross domain. Canvas create from element is working perfectly, but when try to canvas.toDataURL("image/png"); it gives error SecurityError: The operation is insecure Please help me to solve this issue. canvas.toDataURL("image/png"); is working fine when image not load from cross domain.

Thanks in advance.

4

3 回答 3

5

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

如果你真的很幸运...

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

或者

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

或者

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

于 2013-05-04T07:17:46.273 回答
3

即使我的项目也面临同样的问题。但是，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();
        }
    });

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

于 2014-09-22T15:03:40.103 回答
2

我很难弄清楚这一点，没有其他答案对我有用，也没有提供阻止此错误被抛出的步骤。

一步一步的过程：

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();）
于 2018-02-28T08:09:44.927 回答