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

Question

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

我见过将 SVG 转换为 Canvas 并将 Canvas 转换为图像的解决方案。这对我不起作用，因为 SVG 使用类来设置元素的样式(由于可维护性，我宁愿不更改)，这会导致整个 Canvas 变成黑色并带有非常粗的线条。

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

该页面位于 Ruby on Rails 项目中，因此它不必是纯 JavaScript 解决方案，但我更愿意使用 JavaScript 来执行此操作，这样我也可以在其他项目中实现它。

Answer 1

要在 Canvas 中显示您的 svg，您首先必须使用解析器/渲染器实用程序(例如 http://code.google.com/p/canvg/)对其进行转换。

(代码改编自:Convert SVG to image (JPEG, PNG, etc.) in the browser)

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