Is there an equivalent of canvas's toDataURL method for SVG? [closed]
I am trying to load an svg image into canvas for pixel manipulation
I need a method like toDataURL
or getImageData
for svg
on Chrome/Safari I can try doing it through and image and canvas
var img = new Image()
img.onload = function(){
ctx.drawImage(img,0,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,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 :))
But I get security errors. Any other way?
Here is a live demo of the problem http://clstff.appspot.com/gist/462846 (you can view source)
var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString);
From: 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.