Convertissez SVG en image (JPEG, PNG, etc.) dans votre navigateur

Question

Je souhaite convertir un SVG en image bitmap (comme JPEG, PNG, etc.) via JavaScript.

Answer 1

La solution

jbeard4 fonctionne bien.

J'utilise Raphael SketchPad pour créer le SVG. Lien vers le fichier de l'étape 1.

Pour le bouton "Enregistrer" (l'identifiant du svg est "éditeur" et l'identifiant du canevas 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...
});

Answer 2

Voici comment procéder via JavaScript :

1. Rendu des images SVG via Canvas à l'aide de la bibliothèque JavaScript canvg : https://github.com/gabelerner/canvg
2. Capturez un URI de données codé au format JPG (ou PNG) à partir de Canvas en suivant ces instructions : Capturez le Canvas HTML au format gif/jpg/png/pdf ?