PhantomJS并没有完全将Sankey图HTML呈现为PNG

Question

我无法调整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中？或其他地方？

Answer 1

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

例如，我分叉了您提供的示例，将其重命名为html文件，您可以查看here。

我运行rCharts::take_screenshot('http://rcharts.io/viewer/?7063641')，这会生成以下屏幕截图。 take_screenshot函数使用system命令，在Mac上运行良好。我没有在Windows上测试它，所以YMMV。

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

Answer 2

好的 - 我发现了这个问题。它与浏览器显示差异有关。 SANKEY.CSS设置文本阴影：

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

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

所以，修复是在我的主HTML文件中覆盖.node text-shadow。在更改之后，所有内容都在PhantomJS创建的PNG中进行渲染。

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

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