使用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
• 我使用了＆＃39; Recharts＆＃39;图表库虽然我考虑转换为“胜利”。

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");