在 nvd3（或带 css 的 d3）的浏览器截图中答案

【问题标题】：in browser screenshots of nvd3 (or d3 with css)在 nvd3（或带 css 的 d3）的浏览器截图中
【发布时间】：2013-11-14 03:30:31
【问题描述】：

我正在运行一个 Rails 应用程序并尝试在浏览器中获取 nvd3 图形的屏幕截图。

根据我的测试，canvg 和 html2canvas 无法渲染 nvd3 附带的 css。有没有人能够从 nvd3 svg 创建一个 png？

html2canvas 示例 - 尝试在 html2canvas preview 上渲染 the nvd3 scatter。它不工作......

有什么想法吗？

【问题讨论】：

This question 如果您可以在服务器上执行此操作，应该会有所帮助。
进一步阅读，来自 phantomJS wiki 的 this 页面和 this 屏幕抓取实用程序集合可能会有所帮助。
phantomJS 不是终端实用程序吗？我将如何在浏览器中使用它？

标签： javascript ruby-on-rails svg d3.js nvd3.js

【解决方案1】：

从 html2canvas FAQ 我们知道它不能正确处理 svg。

我有非常相似的要求，“example of how to export a png directly from an svg”解决了我的问题（内部采用了svg-crowbar 代码）。基本上，您需要将 svg 绘制到画布上，然后将图像导出为 png，并且为所有 svg 元素“显式设置 css 样式”是使导出的图像像原始图像一样的警告。

【讨论】：