¿Hay un equivalente del método toDataURL de canvas para SVG?

estoy tratando de cargar una imagen SVG en la lona para la manipulación de píxeles Necesito un método como toDataURL o getImageData para SVG¿Hay un equivalente del método toDataURL de canvas para SVG?

en Chrome/Safari puedo intentar hacerlo a través de e imagen y el lienzo

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

Pero recibo errores de seguridad. ¿Alguna otra manera?

Aquí está una demostración en vivo del problema http://clstff.appspot.com/gist/462846 (se puede ver el código fuente)

Fuente

2010-07-03 Drew LeSueur

Es la imagen SVG procedentes de un dominio diferente? Si es así, no puede llamar a 'toDataURL' o' getImageData' porque el lienzo ya no es de "limpieza de origen". –

Viene del * mismo * dominio. Incluso intenté hacer 'img.src =" data: image/svg + xml; base64, ... "' pero eso tampoco funcionó –

Esto parece ser un error en Webkit: https: //bugs.webkit. org/show_bug.cgi? id = 39059 – stefanw

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

La razón por la que no se puede utilizar un elemento de imagen SVG como fuente para el método drawImage es simple, pero doloroso: la especificación actual de Canvas no (todavía) permite referencia SVGImageElement como fuente para drawImage y solo puede hacer frente a HTMLImageElement, HTMLCanvasElement y HTMLVideoelement. Este corto plazo será direccionado durante el proceso de que define el comportamiento "SVG en HTML5" y podría extenderse para permitir SVGSVGElement también. El elemento xhtml: img en la lista 3 usa visibilidad: oculto porque no lo queremos para interferir con su copia visible en el lienzo.

Fuente

2010-07-15 22:19:26 manalang

Sí, usted no puede hacerlo directamente, pero se puede utilizar canvg para eso, quiero decir, SVG para dibujar a la lona, y obtener datos de URL lienzo. No es sin errores, especialmente para el procesamiento de degradados complejos, pero tuve una experiencia positiva con él.

Fuente

2012-09-17 19:55:25 vladich

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

Fuente

2013-05-17 08:05:52

primera descarga de un js svg_todataurl.js biblioteca e incluirlo

a continuación, sólo pega este código

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

Fuente

2014-04-17 08:14:33 yellowcode

¿Hay un equivalente del método toDataURL de canvas para SVG?

Respuesta

Cuestiones relacionadas