Converti SVG in immagine (JPEG, PNG, ecc.) Nel browser

Voglio convertire SVG in immagini bitmap (come JPEG, PNG, ecc.) Tramite JavaScript.

Ecco come puoi farlo tramite JavaScript:

  1. Usa la libreria JavaScript di canvg per visualizzare l’immagine SVG usando Canvas: https://github.com/gabelerner/canvg
  2. Cattura un URI di dati codificato come JPG (o PNG) dal Canvas, secondo queste istruzioni: Cattura canvas HTML come gif / jpg / png / pdf?

La soluzione di jbeard4 funzionava magnificamente.

Sto usando Raphael SketchPad per creare un SVG. Collegamento ai file nel passaggio 1.

Per un pulsante Salva (id di svg è “editor”, l’id di canvas è “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... }); 

Questo sembra funzionare nella maggior parte dei browser:

 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; } 

Ecco una soluzione lato server basata su PhantomJS. Puoi utilizzare JSONP per effettuare una chiamata interdominio al servizio immagini:

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

Per esempio:

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

Quindi puoi visualizzare l’immagine con il tag img:

  

Funziona attraverso il browser.

Se non intendi a livello di codice, questa domanda dovrebbe probabilmente appartenere a superuser.com.

In entrambi i casi, il kit di strumenti SVG di Batik può essere di aiuto, in particolare SVG Rasterizer .