Czy istnieje odpowiednik metody canvas doDataURL dla SVG?

Question

Próbuję załadować svg obraz na płótnie dla manipulacji piksela muszę metody takie jak toDataURL lub getImageData dla SVG

w Chrome/Safari mogę spróbować zrobić to poprzez i obraz i płótna

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 :)) 

Ale dostaję błędy bezpieczeństwa. W inny sposób?

Oto live demo problemu http://clstff.appspot.com/gist/462846 (można zobaczyć źródło)

Answer 1

Od: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

powód, dla którego nie można użyć SVG element obrazu jako źródła dla metody drawImage jest prosty, ale bolesny: obecna specyfikacja Canvas nie zezwala (jeszcze) na odniesienie SVGImageElement jako źródło dla drawImage i może poradzić sobie tylko z HTMLImageElement, HTMLCanvasElement i HTMLVideoelement. Ten krótki czas oczekiwania to prawdopodobnie adresowany podczas procesu definiowania zachowania "SVG w HTML5" i może zostać rozszerzony, aby umożliwić również SVGSVGElement. Element xhtml: img w wykazie 3 używa widoczności: ukryty, ponieważ nie chcemy, aby był on zakłócany przez jego widoczną kopię na kanwie .

Answer 2

Tak, nie można tego zrobić bezpośrednio, ale można użyć canvg na to, mam na myśli, aby narysować SVG na płótnie i uzyskać url danych z płótna. Nie jest bez błędów, szczególnie w przypadku złożonych przetwarzania gradientów, ale miałem z tym pewne pozytywne doświadczenia.

Answer 3

var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString); 

Answer 4

najpierw pobrać js svg_todataurl.js biblioteczne i to ona

potem po prostu wklej ten kod

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");