javascript - 使用 javascript 将 SVG 保存为 PNG(或其他)

Question

我想将生成的 SVG(通过使用 d3 的 JavaScript 图形库)保存为 PNG 或其他图像格式。

我尝试过: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

这不会将我的 SVG 渲染到 Canvas 上。该示例有效，但不适用于我的 SVG，因为它不包含 <foreignObject>指令。

有没有其他不涉及服务器端的图片保存方式？

技术细节:

• 项目使用 ReactJS
• 尽管我考虑改用“Victory”，但我还是使用“Recharts”库来绘制图表。

Answer 1

类似的事情怎么样:

Capture HTML Canvas as gif/jpg/png/pdf?

他们建议创建一个数据网址:

var image = canvas.toDataURL("image/png");

然后将带有数据 url 的 img 元素添加到 DOM

document.write('<img src="'+image+'"/>');

或者只是将其分配给window.location

window.location = canvas.toDataURL("image/png");