将 D3 图表另存为图像答案

【问题标题】：Save D3 chart as image将 D3 图表另存为图像
【发布时间】：2016-07-18 04:03:44
【问题描述】：

我在应用程序中创建了很多 D3 图表。

但现在我的要求是以任何格式保存 D3 图表，如 png/gif 或 pdf。

我搜索了很多，每个人都说我们可以使用画布。

谁能给出任何例子或链接...

从概念上讲，我对此很清楚

使用 canvg JavaScript 库使用 Canvas 渲染 SVG 图像：https://github.com/gabelerner/canvg

根据以下说明从 Canvas 捕获编码为 JPG（或 PNG）的数据 URI：Capture HTML Canvas as gif/jpg/png/pdf?

如果有人实现了我真正想要的，那么您能否分享代码。

【问题讨论】：

How to convert/save d3.js graph to pdf/jpeg的可能重复

标签： d3.js

【解决方案1】：

搜索了很多资源，尝试了很多东西，我找到了SaveSvgAsPng 在 GitHub 上。

很容易实现和使用同一链接上自述文件页面上的可用资源。

步骤

将 Javascript 库添加到您的项目中。
使用 saveSvgAsPng 调用编写函数，根据需要包含其他选项。

使用示例

saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png");

使用 d3.js 的示例函数

// I have button in html with id="download"
d3.select("#download")
.on('click', function(){
    // Get the d3js SVG element and save using saveSvgAsPng.js
    saveSvgAsPng(document.getElementsByTagName("svg")[0], "plot.png", {scale: 2, backgroundColor: "#FFFFFF"});
})

对于这个例子，我的地块对于网页来说很小，所以为了下载而增加了一倍的大小，而不是默认的透明背景，我改为白色。

【讨论】：

我正在使用这个库，但我无法访问我的外部 css 文件。有什么方法可以访问它们，或者有什么方法可以将我的 css 类传递给库，以便正确呈现我的图像。
我知道最后一个答案很老了，但是你找到解决这个问题的方法了吗？

【解决方案2】：

SaveSvgAsPng 也为我工作。但是如果你想让它在 IE 中工作，你需要包含“canvg”并将其作为参数传递，如下所示：

function saveAsImage(name, id) {

var svg = $('#'+id).find('svg')[0];

saveSvgAsPng(svg, name + '.png', { canvg: canvg, backgroundColor: 'white'});

}

“backgroundColor”参数在您的图表需要与背景一起保存时也很有用。

【讨论】：