问题描述
首先,我知道当源图像来自另一个来源时,访问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时抛出安全错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!