javascript - imagen - ¿Cómo dibujar un svg en línea(en DOM) a un lienzo?
html2canvas ejemplos (2)
Para SVG en línea, deberá:
-
Convierta la cadena SVG en un
Blob - Obtenga una URL para el blob
-
Cree un elemento de imagen y configure la URL como
src -
Cuando está cargado (
onload), puede dibujar el SVG como una imagen en el lienzo -
Use
toDataURL()para obtener el archivo PNG del lienzo.
Por ejemplo:
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG data-uri
});
Por supuesto, console.log aquí es solo por ejemplo.
Almacene / transfiera la cadena en su lugar aquí.
(También recomendaría agregar un controlador
onerror
dentro del método).
También recuerde establecer el tamaño del lienzo usando los atributos de
width
y
height
, o desde JavaScript usando las propiedades.
Bueno, necesito ayuda para convertir un archivo / imagen .svg a un archivo / imagen .png ...
Tengo una imagen .svg en mi página. Se guarda en mi servidor (como un archivo .png). Necesito convertirlo a un archivo .png a pedido (al hacer clic en un botón) y guardar el archivo .png en el servidor (lo haré con una solicitud .ajax).
Pero el problema es la conversión.
Leí muchas cosas sobre el lienzo html5, que probablemente pueda ayudar a hacer lo que necesito hacer ahora, pero no puedo encontrar ninguna solución clara a mi problema y, tbh, no entiendo todo lo que encontré ... Entonces Necesito algunos consejos claros / ayuda sobre la forma en que tengo que hacerlo.
Aquí está la plantilla de "idea html":
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
y algunos js:
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
Luego, necesito dibujar el svg en el Canvas, recuperar los datos de base64 y guardarlos en un archivo .png en mi servidor ... pero ... ¿cómo? Leí sobre tantas soluciones diferentes que en realidad estoy ... perdido ... Estoy trabajando en un jsfiddle, pero en realidad no estoy ... en ninguna parte ... http://jsfiddle.net/xfh7nctk/6/ ... Gracias por leer / ayuda
Vengo mucho después, ya que surgió alguna otra pregunta de esta porque la respuesta aceptada puede producir un comportamiento indeseable.
La solución @ K3N es casi correcta, pero iría en contra del uso de
svgElement.outerHTML
.
En cambio, uno debería preferir el
new XMLSerializer().serializeToString(svgElement)
.
Además, el uso de blob y de la API de URL no es necesario y un dataURI simple tiene más compatibilidad entre navegadores.
Entonces, una versión completa de esto sería:
function drawInlineSVG(svgElement, ctx, callback){
var svgURL = new XMLSerializer().serializeToString(svgElement);
var img = new Image();
img.onload = function(){
ctx.drawImage(this, 0,0);
callback();
}
img.src = ''data:image/svg+xml; charset=utf8, ''+encodeURIComponent(svgURL);
}
//usage :
drawInlineSVG(document.querySelector(''svg''), ctxt, function(){console.log(canvas.toDataURL())})