Question

我有一些使用D3js创建的图表，我想通过JavaScript转换为PNG图像，以便用户可以下载图表。

我见过将SVG转换为画布并将画布转换为图像的解决方案。这对我来说不起作用，因为SVG使用类来设置元素的样式（这是因为可持续性而不能改变的东西），这会导致整个画布变成黑色，线条非常粗。

是否可以直接将SVG图表转换为PNG？

该页面位于Ruby on Rails项目中，因此它不一定是纯JavaScript解决方案，但我更喜欢使用JavaScript，所以我也可以在其他项目中实现它。

Answer 1

要在画布中显示svg，首先必须使用解析器/渲染器实用程序（例如http://code.google.com/p/canvg/

）对其进行转换

（代码改编自：在浏览器中将SVG转换为图像（JPEG，PNG等））

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("svg").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

将使用D3js创建的SVG转换为PNG

1 个答案: