在瀏覽器中將 SVG 轉換為圖片（JPEG、PNG 等）

Question

我想透過 JavaScript 將 SVG 轉換為點陣圖影像（如 JPEG、PNG 等）。

Answer 1

jbeard4 解決方案運作良好。

我正在使用 Raphael SketchPad 建立 SVG。連結到步驟 1 中的文件。

對於“儲存”按鈕（svg 的 id 是“editor”，canvas 的 id 是“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

以下是透過 JavaScript 實作的方法：

1. 使用canvg JavaScript函式庫透過Canvas渲染SVG映像：https://github.com/gabelerner/canvg
2. #根據以下說明從 Canvas 捕獲編碼為 JPG（或 PNG）的資料 URI：將 HTML Canvas 捕獲為 gif/jpg/png/pdf？