本文介绍了IE在canvas上调用toDataUrl时抛出安全错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

首先,我知道当源图像来自另一个来源时,访问canvas的 toDataURL 方法是一个安全问题。



但在我的例子中,我使用 data: url作为我的 img 然后使用 img 并在 canvas 上绘制,然后调用 canvas.toDataUrl



这在Chrome和Firefox上可以正常工作,但在IE中却出现安全错误!



想法?

  ... 
var svgxml = getxmlsvg
img.onload = function(){
canvas.drawImage(this,0,0);
canvas.toDataURL(image / png); //< --- security error
}
image.src = URL.createObjectURL(new Blob([svgxml],{type:image / svg + xml; charset = utf-8} ))

这是

但是我正在浏览器中创建SVG。

解决方案

存在一个抽象svg - > canvas - > png的库,并向SVG元素添加一个方法在任何浏览器中,你可以调用mySvg.toDataUrl()与回调和选项canvg:





此实现考虑到

 < script type =text / javascriptsrc =安全性例外,因此您可以通过您遇到的权限错误。 http://canvg.github.io/canvg/rgbcolor.js\"> ;</script> 
< script type =text / javascriptsrc =http://canvg.github.io/canvg/StackBlur.js>< / script>
< script type =text / javascriptsrc =http://canvg.github.io/canvg/canvg.js>< / script>
< script>
< script type =text / javascriptsrc =http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js>< / script>

mySVGelement.toDataURL(image / png,{
renderer:canvg
callback:function(data){
image.src = data;
}
});
< / script>

兼容性

 浏览器E xportingformat 
SVG + XML PNG / canvg PNG /原生
IE 9+ 9+ -
Chrome + + 33+²
Safari + + -
Firefox + + 11+¹
Opera + + -


first of all, I know that accessing toDataURL method of canvas when its source image is from another origin is a security issue.

but in my case, I am using data: url as the source of my img and then use img and draw it on canvas and then call canvas.toDataUrl.

this works fine on Chrome and Firefox but fails with security error in IE!

any idea?

...
var svgxml = getxmlsvg();
img.onload = function(){
    canvas.drawImage(this, 0, 0);
    canvas.toDataURL("image/png"); // <--- security error
}
image.src = URL.createObjectURL(new Blob([svgxml], {type: "image/svg+xml;charset=utf-8" }))

Here is the quote from svgopen.org

But I am creating SVG on the fly in the browser.

解决方案

There exists a library that abstracts the svg --> canvas --> png and adds a method to the SVG element so that in any browser you can just call mySvg.toDataUrl() with a callback and the option "canvg":

https://github.com/sampumon/SVG.toDataURL

This implementation takes into account security exceptions so you can get past the permissions error you are encountering.

<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.github.io/canvg/canvg.js"></script>
<script>
<script type="text/javascript" src="http://rawgit.com/sampumon/SVG.toDataURL/master/svg_todataurl.js"></script>

mySVGelement.toDataURL("image/png", {
  renderer: "canvg"
  callback: function(data) {
      image.src = data;
  }
});
</script>

Compatibility:

Browser     E x p o r t i n g  f o r m a t
            SVG+XML  PNG/canvg  PNG/native
IE           9+       9+         -
Chrome       +        +          33+ ²
Safari       +        +          -
Firefox      +        +          11+ ¹
Opera        +        +          -

这篇关于IE在canvas上调用toDataUrl时抛出安全错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 01:59
查看更多