1

我无法调整 PhantomJS 以创建与原始浏览器演示相匹配的 PNG 文件。

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

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

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

4

2 回答 2

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 作为底层渲染引擎。

于 2013-10-21T10:32:06.533 回答
2

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

例如，我对您提供的示例进行了 fork，将其重命名为 html 文件，您可以在此处查看。

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

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

截屏

于 2013-10-20T01:21:05.783 回答