javascript - insertar - Convierta SVG a imagen(JPEG, PNG, etc.) en el navegador

svg to png jquery

Question

Quiero convertir SVG en imágenes de mapa de bits (como JPEG, PNG, etc.) a través de JavaScript.

Answer 1

Aquí es cómo puedes hacerlo a través de JavaScript:

1. Utilice la biblioteca de JavaScript canvg para representar la imagen SVG utilizando Canvas: https://github.com/gabelerner/canvg
2. Capture un URI de datos codificado como JPG (o PNG) desde el Canvas, de acuerdo con estas instrucciones: ¿ Capture HTML Canvas como gif / jpg / png / pdf?

Answer 2

Aquí hay una solución del lado del servidor basada en PhantomJS. Puede usar JSONP para realizar una llamada de dominio cruzado al servicio de imágenes:

https://github.com/vidalab/banquo-server

Por ejemplo:

http://[host]/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

Luego puedes mostrar la imagen con la etiqueta img:

<img src="data:image/png;base64, [base64 data]"/>

Funciona a través del navegador.

Answer 3

Esto parece funcionar en la mayoría de los navegadores:

function copyStylesInline(destinationNode, sourceNode) {
var containerElements = ["svg","g"];
for (var cd = 0; cd < destinationNode.childNodes.length; cd++) {
var child = destinationNode.childNodes[cd];
if (containerElements.indexOf(child.tagName) != -1) {
copyStylesInline(child, sourceNode.childNodes[cd]);
continue;
}
var style = sourceNode.childNodes[cd].currentStyle || window.getComputedStyle(sourceNode.childNodes[cd]);
if (style == "undefined" || style == null) continue;
for (var st = 0; st < style.length; st++){
child.style.setProperty(style[st], style.getPropertyValue(style[st]));
}
}
}
function triggerDownload (imgURI, fileName) {
var evt = new MouseEvent("click", {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement("a");
a.setAttribute("download", fileName);
a.setAttribute("href", imgURI);
a.setAttribute("target", ''_blank'');
a.dispatchEvent(evt);
}
function downloadSvg(svg, fileName) {
var copy = svg.cloneNode(true);
copyStylesInline(copy, svg);
var canvas = document.createElement("canvas");
var bbox = svg.getBBox();
canvas.width = bbox.width;
canvas.height = bbox.height;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, bbox.width, bbox.height);
var data = (new XMLSerializer()).serializeToString(copy);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob)
{
var blob = canvas.msToBlob();
navigator.msSaveOrOpenBlob(blob, fileName);
}
else {
var imgURI = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
triggerDownload(imgURI, fileName);
}
document.removeChild(canvas);
};
img.src = url;
}

Answer 4

La solución jbeard4 funcionó muy bien.

Estoy usando Raphael SketchPad para crear un SVG. Enlace a los archivos en el paso 1.

Para un botón Guardar (id de svg es "editor", id de lienzo es "canvas"):

$("#editor_save").click(function() {
// the canvg call that takes the svg xml and converts it to a canvas
canvg(''canvas'', $("#editor").html());
// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
// do what you want with the base64, write to screen, post to server, etc...
});

Answer 5

Si no quiere decir programáticamente, esta pregunta probablemente debería pertenecer a superuser.com.

De cualquier manera, el Kit de herramientas SVG de Batik puede ser de ayuda, especialmente el Rasterizador SVG .