如何截取渲染的 HTML 页面答案

【问题标题】：How to take screenshot of rendered HTML page如何截取渲染的 HTML 页面
【发布时间】：2010-11-18 04:40:13
【问题描述】：

我们的网络分析包包含有关用户在页面内活动的详细信息，并且我们在网页顶部的叠加层中显示（点击/滚动/交互）可视化。目前这是一个包含页面实时呈现的 IFrame。

由于页面随时间变化，旧数据不再对应页面的当前布局。我们希望运行一个爬虫来偶尔对页面进行快照，从而使我们能够维护与页面不同版本的交互记录。

我们有这个（Linux）的工作实现，但快照过程是一个可怕的 Python/JavaScript/HTML hack，它打开一个 Firefox 窗口、截屏和滚动、合并并保存到文件。这需要我们在通常的无头服务器上安装 X 堆栈，并且每页需要一分钟以上的时间。

我们更喜欢无头实现，其性能更接近于常规 Web 浏览器中的渲染时间，但还没有找到任何东西。

有一些使用 Mozilla 源代码作为起点来构建东西的趋势，但这对我来说似乎有点过头了，如果我们试图保持最新状态，那也是一场维护噩梦。

建议？

【问题讨论】：

我为此使用wkhtmltopdf。它需要一个 X 服务器，但 Xvfb 就足够了，所以它在技术上是无头的。

标签： html rendering

【解决方案1】：

An article on Digital Inspiration指向CutyCapt，它是跨平台的，使用Webkit渲染引擎，IECapt使用当前的IE渲染引擎，需要Windows，natch。使用 Firefox 的渲染引擎 Gecko 时，我没有想到任何东西。

不过，我怀疑你能否摆脱 X。由于 CutyCapt 需要 Qt，它需要 X 或 Windows 安装。而且，类似地，IECapt 将需要 Windows（如果您想尝试在 Linux 下运行它，则需要 Wine，然后您又需要 X）。我怀疑你是否能找到不需要 Qt、Gtk、GDI 或 Cocoa 的渲染引擎，因此需要完整安装显示库。

【讨论】：

@jrockway：我不确定你的前身是什么，但我认为你可能没有抓住重点。这里的反对意见不是需要物理屏幕（它不是），而是安装了大量额外的库，这些库支持机器上的图形界面，否则只能用于终端服务。跨度>

【解决方案2】：

为什么不存储发送给客户端的 HTML？然后，您可以使用它在网络浏览器中重新显示为一个页面，以显示它的外观。

使用有关使用操作的 webanalytics 数据，他们可以使用这些数据将组合框、字段等默认为客户端将拥有的值，甚至更改按钮等上的 CSS 以将它们标记为被推送。

作为一个好处，您不需要 X 堆栈，不需要对图像进行任何爬取或存储。

编辑（关于安德鲁·摩尔）：

这是您将当前的 CSS/图像存储在版本号下。在 HTML 的注释中放置一个易于解析的版本号。如果您更改 CSS/图像并使用现有名称，请在发送的 HTML 输出中增加版本号。

存储 HTML 的系统将知道它需要获取一个新副本并存储在一个新编号下。重新显示时，它只是使用版本号来确定要使用的 CSS/图像集。

我们目前在这里有一个使用非常相似的系统的系统，因此我们可以跟踪用户的操作并在他们致电我们的帮助台时提供更好的支持，因为他们可以调出用户会话并关注他们所做的事情，甚至是一些实时的。

您甚至可以将其编码为在存储时自动审查敏感字段。

【讨论】：

直到他们彻底改变布局和 css/图像的那一天。
考虑您的编辑。现在您遇到了解析文件并更正任何相对/绝对路径以使其正确显示的附加问题。图片路由简直是最简单的。
没错，但没那么难。我看不到如何渲染页面并拍摄图像，这确实是最简单的方法。在最坏的情况下，您可以将所有 CSS 存储在每个用户会话中，并确保在更改图像时也更改其名称。或者只是确保您首先通过相对路径使用所有内容，这意味着如果您正确提供它，您根本不需要更改 HTML 中的路径。我们在这里做了，除了一些最初的数据库问题之外，它就像一个魅力。
选择屏幕截图而不是页面、内容等的蜘蛛副本背后的逻辑是，我们正在成像的许多页面包括由 Ajax 等加载的内容，并且依赖于它们的后端服务器提供该内容。内容几乎每天都在更新，随着内容变得陈旧，后端服务器不再提供它，因此如果不通过实际的浏览器引擎运行它，就不可能获得准确的屏幕截图。（也许一开始这不是这些页面的最佳设计，但它们是第三方的，我们坚持这样做）

【解决方案3】：

根据您的具体需求，也许您可以使用众多免费的网页缩略图服务之一？ snapcasa，例如让您每月生成数千/不收费不做广告..（从未使用过，只是用谷歌搜索“免费缩略图服务”）来找到这个。

只是一点

【讨论】：