渲染 HTML (w/javascript) 并转换为图像答案

【问题标题】：Rendering HTML (w/ javascript) and Converting to an Image渲染 HTML (w/javascript) 并转换为图像
【发布时间】：2012-06-19 18:37:05
【问题描述】：

我有一个包含 Javascript 代码的 HTML 页面。它需要先渲染，然后才能转换为图像。

我知道 wkhtmltoimage、PhantomJS、khtmltopng、webkit2png、PrinceXML 和 html2image 等项目。我已经实现了其中的一些，但我试图找到一个不需要使用 Process 来执行命令的纯 Java 解决方案。任何帮助都会很棒，谢谢！

编辑：我查看了 Cobra，但似乎 JS 支持仍在开发中，它无法正确解析我的 html 文件。

或者如果有其他方法可以做到这一点，请告诉我。我只是想找到可能的最佳解决方案。

【问题讨论】：

纯 Java 解决方案还是纯 JavaScript 解决方案？他们（方式）不一样。
纯Java解决方案，但是它需要能够接受HTML + JS
嗯，好的。好吧，您是在谈论可以处理带有 JavaScript 代码的任意 HTML 页面的东西吗？如果是这样，我不会辜负你的希望。 FlyingSaucer 项目在 XHTML 和 CSS 方面做得非常好，但它不处理 JavaScript。
是的，这就是我想要的。嗯，我记得遇到过那个项目，但不幸的是它不处理 JavaScript。
好吧，我个人并没有太多的经验，但是是的，这听起来像是通常正确的方法。

标签： java javascript html

【解决方案1】：

没有纯 Java 解决方案 - 没有人用 Java 编写支持 HTML 5 的浏览器。

我会尝试以下任何一种方法：

使用 env.js + rhino 模拟可以运行 JavaScript 的浏览器。这应该会给你一个 DOM，你可以使用 FlyingSaucer 渲染它。
将 SWT 添加到您的类路径（加上您平台的二进制文件）。它包含一个Browser 组件，该组件使用您系统的浏览器访问render URLs or an HTML string。

您可能需要SWTBot 以无头模式运行浏览器。

如果这不起作用并且您使用的是 Linux，那么您可以启动内存 X 服务器 Xvfb 来打开您的浏览器。或者您可以使用vncserver 在您的服务器上启动一个桌面。

[编辑]project phantomjs 可能会做你想做的事：

PhantomJS (www.phantomjs.org) 是一个可使用 JavaScript 或 CoffeeScript 编写脚本的无头 WebKit。
[...]
用例：无头 Web 测试、网站抓取、页面渲染
多平台，可用于主要操作系统：Windows、Mac OS X、Linux、其他 Unices
Web 标准的快速本地实现：DOM、CSS、JavaScript、Canvas、SVG。没有仿真！
Linux 上的纯无头 (X11)，非常适合持续集成系统。也在 Amazon EC2 上运行。

quickstart page 解释了如何加载网页并将其呈现为图像。

【讨论】：

感谢亚伦的建议！我会尝试实施这些方法。
我已经实现了 env.js + rhino 来运行 javascript+html，但是我在实际链接 FlyingSaucer 和 env.js 中的 DOM 时遇到了麻烦。我知道我可以将 DOM 文档传递给 FlyingSaucer，但是我对如何从 env.js+rhino 实际获取 DOM 有点迷茫。如果你有 env.js 和 rhino 方面的经验，任何建议都会很棒，谢谢！
env.js 只是为您提供与浏览器相同的环境。请参阅此答案如何获取最终页面的 HTML：stackoverflow.com/questions/817218/… 只需从 rhino 中的解决方案之一运行 JavaScript 并将结果传递给 FlyingSaucer 进行渲染。
再次感谢您的帮助。所以在获取渲染页面的 HTML 时，我只会得到 HTML 而不是 JS。如果 javascript 实际上并没有改变 HTML 代码，但需要它来呈现图表或图形怎么办。我的意思是，我有 3-4 个 javascript 函数需要渲染图表。在我的情况下，这似乎是不可能的，因为我需要 JS 来呈现图表。如果它只返回 HTML，那么它将返回内联脚本来呈现图表。不过我可能理解错了。
env.js 返回后，页面上的所有脚本应该已经执行完毕，并且 DOM 应该和浏览器中的一样。如果这没有发生，您页面中的脚本可能会使用动画或尝试加载数据（env.js 默认禁止以保护您）。我建议写一些小例子来看看它是如何工作的，并在遇到问题时发布新问题。

【解决方案2】：

我找到了使用WebRenderer 的解决方案。 WebRenderer 是一种付费解决方案，有 Swing 版、服务器版和桌面版。自 2012 年 7 月 9 日起，swing 版本是唯一支持 HTML5 的版本。但是，可以在服务器上使用 swing 版本通过实例化浏览器而不是创建 JFrame 来转换图像。见this question。

【讨论】：