使用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 渲染到画布上。该示例适用，但不适用于我的 SVG，因为它不包含 <foreignObject> 指令。

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

技术细节：

• 项目在 ReactJS 中
• 虽然我考虑切换到“Victory”，但我使用“Recharts”库来绘制图表。

Answer 1

这样的事情怎么样：

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

他们建议创建一个数据 url：

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

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

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

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

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