Convert SVG to image (JPEG, PNG, etc.) in your browser
P粉052686710
P粉052686710 2023-08-23 21:18:39
0
2
543
<p>I want to convert an SVG to a bitmap image (like JPEG, PNG, etc.) via JavaScript. </p>
P粉052686710
P粉052686710

reply all(2)
P粉668804228

jbeard4 solution works well.

I'm using Raphael SketchPad to create the SVG. Link to the file from step 1.

For the "Save" button (the id of svg is "editor" and the id of canvas is "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...
});
P粉594941301

The following is the method implemented through JavaScript:

  1. Use the canvg JavaScript library to render SVG images through Canvas: https://github.com/gabelerner/canvg
  2. Capture a data URI encoded as JPG (or PNG) from Canvas according to the following instructions: Capture HTML Canvas as gif/jpg/png/pdf?
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template