如何将 D3.js 可视化呈现为 JPG 或图像？ [复制]答案

【问题标题】：How can I render a D3.js visualization as a JPG, or an image? [duplicate]如何将 D3.js 可视化呈现为 JPG 或图像？ [复制]
【发布时间】：2017-06-10 22:50:26
【问题描述】：

我使用 ASP.NET 4.5、C# 和 D3.js 构建了一个界面，我在其中绘制了人体的器官和骨骼。问题是当我尝试打印时，它几乎永远不会正确打印出来，我的用户希望在可视化旁边有一个“保存图像”按钮，这样他们就可以将保存的图像导入到他们自己的 Word/PowerPoint 月末报告中.

我不确定是否需要发布我的代码。我只是加载一些我在 Illustrator 中跟踪的 SVG，将其保存在 JSON 文件中并加载到 D3 中。

我知道打印屏幕可能是一种选择，但另存为图像也可以帮助我显示多个文件，而不会用 D3 代码使我的浏览器过载。

【问题讨论】：

搜索canvas.toDataURL()
哦，哇，我不知道它存在！谢谢古斯曼，我会阅读并尝试一下

标签： javascript d3.js svg

【解决方案1】：

d3.js 基本上与 SVG 一起工作。您可以直接从您的 d3.js 工作中下载 .svg 图像。

Here 是一个示例（来自 d3.js 的创建者 Mike Bostock），他逐步从 SVG 到 PNG。

他使用了多种技巧，包括 XML 序列化、Blob 对象（用于原始数据的类似文件的对象 (about)），最后使用 canvas.toDataURL() 从 SVG 创建另一个 PNG 图像。请查看源代码，了解差异非常有趣且有用。

希望对你有帮助

pltrdy

【讨论】：

非常感谢！就像上面提到的古斯曼一样，canvas.toDataURL() 是我不知道的东西，我正在使用错误的方式进行搜索，即我试图搜索如何截取网页的某些区域并将其保存到剪贴板等。但是我很高兴现在有更好的方法。