Convertir SVG en image (JPEG, PNG, etc.) dans le navigateur

Question

Je veux convertir SVG en images bitmap (comme JPEG, PNG, etc.) via JavaScript.

Answer 1

Voici comment vous pouvez le faire via JavaScript:

1. Utilisez la canvg bibliothèque JavaScript pour rendre l'image SVG utilisant Canvas: https://github.com/gabelerner/canvg
2. capture une URI données codées en format JPG (ou PNG) de le Canvas, selon ces instructions: Capture HTML Canvas as gif/jpg/png/pdf?

Answer 2

Si vous ne voulez pas dire par programme, cette question devrait probablement appartenir à superuser.com.

De toute façon, le Batik SVG Toolkit peut être utile, en particulier le SVG Rasterizer.

Answer 3

La solution jbeard4 a fonctionné magnifiquement. J'utilise Raphael SketchPad pour créer un fichier SVG. Lien vers les fichiers à l'étape 1.

Pour un bouton Enregistrer (id svg est « éditeur », id de toile est « toile »):

$("#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 4

est ici une solution côté serveur basé sur PhantomJS. Vous pouvez utiliser JSONP pour faire un appel inter-domaine au service de l'image:

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

Par exemple:

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

Ensuite, vous pouvez afficher l'image avec tag img:

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

Cela fonctionne à travers le navigateur.

Answer 5

Cela semble fonctionner dans la plupart des navigateurs:

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