PhantomJS不完全呈现Sankey图表HTML到PNG

我无法调整PhantomJS来创建与原始浏览器演示文稿相匹配的PNG文件。PhantomJS不完全呈现Sankey图表HTML到PNG

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

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

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

问题：下面是一个SNIP查看的文本字符串之一，当在浏览器中：

enter image description here

这里是相同的字符串由PhantomJS创建的PNG剪断：

enter image description here

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

这是PhantomJS中的一个设置吗？在底层的webkit？或者别的地方？

来源

2013-10-19 John Leonard

rCharts有一个名为take_screenshot一个未公开的函数使用CasperJS（又使用PhantomJS采取创建可视化rCharts截图给定的HTML页面。

例如，我叉你提供的例子，更名为一个HTML文件，其中您可以查看here。

我跑rCharts::take_screenshot('http://rcharts.io/viewer/?7063641')，这会导致下面的屏幕截图。该take_screenshot功能使用system命令，并在Mac上工作得很好。我没有测试它在Windows，所以因人而异。

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

screenshot

来源

2013-10-20 01:21:05 Ramnath

感谢您的快速回复！我会试验这个功能，但它并不直接回答这个问题。放大刚刚发布的图片，您会看到存在白色阴影。我正在寻找建议让这些阴影消失。使用您的URL我确实看到Firefox呈现没有文字阴影的图像，而Chrome则使用文字阴影呈现图像。这表明潜在的引擎差异。 –

我正在使用rCharts :: save将HTML存储到磁盘，以便在PhantomJS中进行后续渲染。如何将其他样式元素（例如.node元素覆盖）添加到“”块？ –

您最好的选择是直接修改您保存的HTML文件。您可以通过使用正则表达式来插入自定义样式元素，或者使用像XML这样的包来更精致些的东西来以编程方式进行编程。 – Ramnath

行 - 我发现这个问题。这与浏览器显示差异有关。 SANKEY.CSS设置文本阴影：（！感谢@ramnath的对着我诉说什么到浏览器的差异）

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

文本阴影在Firefox（我的默认浏览器）忽略并使用Chrome时正确地呈现。 PhantomJS使用webkit来呈现页面（这可以正常工作），而Firefox使用壁虎（显然不能正确实现文本阴影。）在我的原始文章中弄乱文本阴影不会影响任何更改 - 因为Firefox不是呈现任何变化，我正在浏览器中进行试验。

因此，修正是覆盖我的主要HTML文件中的.node文本阴影。改变之后，所有渲染都是在PhantomJS创建的PNG中进行的。

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

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

来源

2013-10-21 10:32:06

PhantomJS不完全呈现Sankey图表HTML到PNG

回答

相关问题