html2canvas - SecurityError:操作不安全

[英]html2canvas - SecurityError: The operation is insecure


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.

我在我的项目中使用了html2canvas.js将我的元素(body)转换为canvas,然后将canvas转换为image。我的元素包含从跨域加载的图像。从元素创建的Canvas工作完美,但是当尝试canvas.toDataURL(“image / png”)时;它给出错误SecurityError:操作不安全请帮我解决这个问题。 canvas.toDataURL( “图像/ PNG”);当图像没有从跨域加载时工作正常。

Thanks in advance.

提前致谢。

3 个解决方案

#1


3  

Not really an html2canvas issue--just a security issue.

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

If your really lucky...

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

You can use imageObject.crossOrigin='anonymous' when downloading your cross domain image. This requires both the server and browser to allow anonymous x-domain transfers. Sadly, almost all servers and most browsers don't yet allow.

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

Alternatively

Don't go cross-domain...serve that image on your own website.

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

Alternatively

Wrap the image request in a json request. Here's a script that does that: http://www.maxnov.com/getimagedata/

在json请求中包装图像请求。这是一个脚本:http://www.maxnov.com/getimagedata/

#2


2  

Even I faced the same issue for my project. But, instead of using a html2canvasproxy.php (as many sites had advised me to), the html2canvas plugin has an inbuilt property which is false by default and which switches between cross domain images.

即使我的项目面临同样的问题。但是,html2canvas插件没有使用html2canvasproxy.php(正如许多网站建议的那样),而是具有内置属性,默认情况下为false,并在跨域图像之间切换。

useCORS and allowTaint can be used in case of cross domain images and for countering canvas taint issues.

useCORS和allowTaint可用于跨域图像和反对画布污点问题。

For Cross Domain Images issue, use useCors and set it to true. If you had modified cross domain images (like converting it into DataURI), the canvas might become tainted which html2canvas would not allow. Here, setting the allowTaint to true would solve the issue and make html2canvas to accept your canvas.

对于跨域图像问题,请使用useCors并将其设置为true。如果您修改了跨域图像(例如将其转换为DataURI),则画布可能会受到污染,而html2canvas不允许这样做。在这里,将allowTaint设置为true将解决问题并使html2canvas接受您的画布。

A sample implementation,

一个示例实现,

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

Hope this helps. Or, if you/anyone has any other ideas, I would be glad to know. Thanks.

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

#3


0  

I had a really difficult time figuring this out and no other answers worked for me nor provided the steps to take to stop this error from being thrown.

我很难搞清楚这一点,没有其他答案对我有用,也没有提供步骤来阻止这个错误被抛出。

STEP BY STEP PROCESS:

逐步过程:

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

Eventually, I was able to determine that the select inputs were the culprits.

最终,我能够确定选择输入是罪魁祸首。

  1. Check if there are any select inputs
  2. 检查是否有任何选择输入

  3. Hide the select inputs before taking the screenshot and add them back after (using jQuery $('.selector').hide(); and $('.selector').show();)
  4. 在获取屏幕截图之前隐藏选择输入并在之后添加它们(使用jQuery $('。selector')。hide();和$('。selector')。show();)

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.silva-art.net/blog/2013/05/04/cda4c463e8956a85b327813ade4120b7.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告