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

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