Convertissez SVG en Image (JPEG, PNG,etc.) dans le navigateur
je veux convertir SVG en images bitmap (comme JPEG, PNG, etc.) à l'aide de JavaScript.
5 réponses
Voici comment vous pouvez le faire par JavaScript:
- utilisez la bibliothèque JavaScript canvg pour rendre L'image SVG en utilisant Canvas: https://github.com/gabelerner/canvg
- capturer un URI de données encodé comme un JPG (ou PNG) à partir de la toile, selon ces instructions: capturer HTML Canvas comme gif/jpg/png / pdf?
jbeard4 solution a fonctionné à merveille.
j'utilise Raphael SketchPad pour créer un SVG. Lien vers les fichiers de l'étape 1.
pour un bouton de sauvegarde (id de svg est "editor", id de canvas est "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...
});
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;
}
Voici une solution Côté Serveur Basée sur PhantomJS. Vous pouvez utiliser JSONP pour faire un appel de domaine croisé au service image:
https://github.com/vidalab/banquo-server
par exemple:
puis vous peut afficher l'image avec la balise img:
<img src="data:image/png;base64, [base64 data]"/>
il fonctionne à travers le navigateur.
si vous ne voulez pas dire programmatically, cette question devrait probablement appartenir à superuser.com.
dans les deux cas, la Boîte À Outils batik SVG peut être utile, en particulier la Rasterizer SVG .