PhantomJS 不完全将 Sankey 图 HTML 渲染为 PNG答案

【问题标题】：PhantomJS not exactly rendering Sankey diagram HTML to PNGPhantomJS 不完全将 Sankey 图 HTML 渲染为 PNG
【发布时间】：2013-10-19 16:44:58
【问题描述】：

我在调整 PhantomJS 以创建与原始浏览器演示相匹配的 PNG 文件时遇到问题。

这是整个sample html file。这是一个使用 rCharts 和 d3-sankey 创建的 sankey 图。（您需要将文件保存到硬盘并从那里查看。）

我在 Windows 上运行并使用 rasterize.js：

>> phantomjs.exe rasterize.js test.html test.png

问题：以下是在浏览器中查看时其中一个文本字符串的片段：

下面是 PhantomJS 创建的 PNG 中相同字符串的片段：

如何使文本阴影消失？我玩过各种 CSS 属性（text-shadow）和特定于 webkit 的属性（例如，-webkit-text-rendering），但似乎无法让它消失。

这是 PhantomJS 中的设置吗？在底层的 webkit 中？还是其他地方？

【问题讨论】：

标签： webkit phantomjs font-face rcharts sankey-diagram

【解决方案1】：

rCharts 有一个名为 take_screenshot 的未记录函数，它使用 CasperJS（它又使用 PhantomJS 截取 rCharts 在给定 html 页面上创建的可视化效果。

比如我fork了你提供的例子，重命名为html文件，可以查看here。

我运行了rCharts::take_screenshot('http://rcharts.io/viewer/?7063641')，结果如下截图。 take_screenshot 函数使用system 命令，在 Mac 上运行良好。我没有在 Windows 上测试过，所以 YMMV。

注意：您需要为此功能安装 dev 分支。

【讨论】：

感谢您的快速回复！我将尝试使用此功能，但它不会直接回答问题。放大刚刚发布的图像，您会看到存在白色阴影。我正在寻找使这些阴影消失的建议。使用您的 URL，我确实看到 Firefox 呈现没有文本阴影的图像，而 Chrome 确实呈现了带有文本阴影的图像。这表明潜在的引擎差异。
我正在使用 rCharts::save 将 HTML 存储到磁盘，以便在 PhantomJS 中进行后续渲染。如何向<head> 块添加其他样式元素（例如，.node 元素覆盖）？
你最好的办法是直接修改你保存的 HTML 文件。您可以通过使用正则表达式插入自定义样式元素或使用 XML 之类的包进行更精致的东西以编程方式完成。

【解决方案2】：

好的 - 我找到了问题。它与浏览器显示差异有关。 SANKEY.CSS 设置文字阴影：

.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}

文本阴影在 Firefox（我的默认浏览器）中被忽略，并使用 Chrome 正确呈现（感谢@ramnath 让我了解浏览器的差异！）。 PhantomJS 使用 webkit 来呈现页面（可以正常工作），而 Firefox 使用 gecko（显然没有正确实现 text-shadow。）在我的原始帖子中摆弄 text-shadow 并没有影响任何更改 - 因为 Firefox 没有呈现任何更改，我正在浏览器中进行试验。

所以，解决方法是在我的主 HTML 文件中覆盖 .node 文本阴影。更改后，一切都按照我喜欢的方式在 PhantomJS 创建的 PNG 中呈现。

.node text {
pointer-events: none;
text-shadow: 0 0px 0 #fff;
}

课程：要在 Windows 上正确测试 HTML 以在 PhantomJS 中呈现，请使用 Chrome 进行预览。两者都使用 webkit 作为底层渲染引擎。

【讨论】：