我正在尝试将svg图像加载到画布中进行像素操作
我需要一个方法,如toDataURL或get ImageData for svg
我需要一个方法,如toDataURL或get ImageData for svg
在Chrome / Safari上,我可以尝试通过图像和画布
var img = new Image()
img.onload = function(){
ctx.drawImage(img,0) //this correctly draws the svg image to the canvas! however...
var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18
var data = ctx.getImageData(0,img.width,img.height).data //also SECURITY_ERR: DOM Exception 18
}
img.src = "image.svg" //that is an svg file. (same domain as html file :))
但是我得到安全错误.
有什么办法吗
这是一个现场演示的问题http://clstff.appspot.com/gist/462846(你可以查看源)
解决方法
来自：
http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105
The reason why you cannot use an SVG image element as source for the drawImage method is simple,but painful: the current Canvas specification does not (yet) allow to reference SVGImageElement as source for drawImage and can only cope with HTMLImageElement,HTMLCanvasElement and HTMLVideoelement. This short-coming will hopefully be addressed during the process of defining “SVG in HTML5” behavior and could be extended to allow SVGSVGElement as well. The xhtml:img element in listing 3 uses visibility:hidden as we do not want it to interfere with its visible copy on the Canvas.
