Tukar SVG kepada imej (JPEG, PNG, dll.) dalam penyemak imbas anda

Question

Saya mahu menukar SVG kepada imej bitmap (seperti JPEG, PNG, dll.) melalui JavaScript.

Answer 1

penyelesaian jbeard4 berfungsi dengan baik.

Saya menggunakan Raphael SketchPad untuk mencipta SVG. Pautan ke fail dari langkah 1.

Untuk butang "Simpan" (id svg ialah "editor" dan id kanvas ialah "kanvas"):

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

Begini cara melakukannya melalui JavaScript:

1. Render imej SVG melalui Kanvas menggunakan perpustakaan JavaScript canvg: https://github.com/gabelerner/canvg
2. Tangkap URI data yang dikodkan sebagai JPG (atau PNG) daripada Canvas menggunakan arahan ini: Tangkap HTML Canvas sebagai gif/jpg/png/pdf?