我在应用程序中创建了很多 D3 图表。
但现在我的要求是以任何格式保存 D3 图表,如 png/gif 或 pdf。
我搜索了很多,每个人都说我们可以使用 Canvas 。
任何人都可以为此提供任何示例或链接...
从概念上讲,我很清楚
使用 canvg JavaScript 库通过 Canvas 呈现 SVG 图像:https://github.com/gabelerner/canvg
根据以下说明从 Canvas 捕获编码为 JPG(或 PNG)的数据 URI:将 HTML Canvas 捕获为 gif/jpg/png/pdf?
如果有人已经实现了我想要的,那么你能分享一下代码吗?
最佳答案
搜索了很多资源,尝试了很多东西,我找到了SaveSvgAsPng
在 GitHub 上。
它很容易实现和使用同一链接上 README 页面上的可用资源。
步骤
使用示例
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"});
})
对于这个例子,我的地 block 对于网页来说很小,所以将大小增加了一倍以供下载,而不是默认的透明背景,我改为白色。
关于d3.js - 将 D3 图表另存为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36303964/