将 D3 图表另存为图像

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

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

我搜索了很多，每个人都说我们可以使用画布来实现这一点。

任何人都可以给出任何示例或链接吗...

从概念上讲我很清楚这一点

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

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

我实际上想要什么，如果有人已经实现了，那么可以请您分享代码吗？

在搜索了很多资源并尝试了很多事情之后，我发现另存SvgAsPng https://github.com/exupero/saveSvgAsPng在 GitHub 上。

它非常容易实现，并且可以使用同一链接上的 README 页面上的可用资源。

Steps

1. 将 Javascript 库添加到您的项目中。
2. 编写一个带有 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"});
})

对于这个例子，我的图对于网页来说很小，因此将大小增加了一倍以供下载，而不是默认的透明背景，我将其更改为白色。