如何截取呈现的HTML页面的屏幕截图

问题描述:

我们的网站分析软件包包含有关用户在页面中的活动的详细信息,并且我们在网页顶部的叠加层中显示(单击/滚动/交互)可视化。目前,这是一个包含页面实时呈现的IFrame。如何截取呈现的HTML页面的屏幕截图

由于页面随时间而改变,因此旧数据不再对应于页面的当前布局。我们希望运行一个蜘蛛来偶尔拍摄页面的快照,使我们能够保持与各种版本页面的交互记录。

我们有这个(Linux)的工作实现,但快照过程是一个可怕的Python/JavaScript/HTML hack,打开一个Firefox窗口,截图并滚动和合并并保存到一个文件。这要求我们在我们的正常无头服务器上安装X堆栈,并且每页需要一分钟。

我们希望在普通网络浏览器中使用性能更接近渲染时间的无头实现,但没有找到任何东西。

用Mozilla的源代码开始构建某些东西是一个动作,但这对我来说似乎有点矫枉过正,如果我们试图使它保持最新,这对维护人来说也是一场噩梦。

对此提出建议?

+0

我使用[wkhtmltopdf](http://code.google.com/p/wkhtmltopdf/)这一点。它需要一个X服务器,但是Xvfb就足够了,所以它在技术上是无头的。 – jrockway 2009-08-10 05:01:31

An article on Digital Inspiration朝向CutyCapt分,它是跨平台的并且使用Webkit渲染引擎以及使用本IE呈现引擎并需要Windows natch的IECapt。使用Firefox的渲染引擎Gecko的首要任务。

但是,我怀疑你将能够摆脱X.由于CutyCapt需要Qt,因此它需要X或Windows安装。而且,类似地,IECapt将需要Windows(或者如果你想在Linux下运行它,那么你需要X)。我怀疑你能找到一个不需要Qt,Gtk,GDI或Cocoa的渲染引擎,因此需要全面安装显示库。

+0

它适用于Xvfb。 – jrockway 2009-08-12 11:35:47

+0

@jrockway:我不确定你的先行词是什么,但我想你可能会错过这一点。这里的异议并不是需要物理屏幕(事实并非如此),而是更多的是安装了大量额外的库,这些库在仅用于终端服务的机器上支持图形界面。 – 2009-08-12 20:39:16

为什么不存储发送给客户端的HTML?然后,您可以使用它在Web浏览器中重新显示为页面,以显示它的样子。

使用你的web使用操作数据,你可以使用它来默认组合框,字段等等,以便客户端可以使用这些值,甚至可以改变按钮等的CSS,将它们标记为被推送。

作为一个好处,你不需要X堆栈,不需要做任何爬取或存储图像。

EDIT(重安德鲁·摩尔):

这是你存储在一个版本号目前的CSS /图像。在HTML中的评论中放置一个易于解析的版本号。如果更改CSS /图像并使用现有名称,请增加发送的HTML输出中的版本号。

存储HTML的系统将知道它需要获取新副本并存储在新号码下。重新显示时,只需使用版本号即可确定要使用哪个CSS /图像集。


目前,我们这里有一个系统,该系统采用了非常相似的系统,所以我们可以跟踪用户的行为,并提供更好的支持,当他们拨打我们的帮助台,因为他们可以调出用户会话,并按照他们做了什么,甚至一些什么生活。

您甚至可以对其进行编码,以便在存储时自动检查敏感字段。

+0

直到他们改变他们的布局和他们的CSS /图像剧烈的那一天起作用。 – 2009-08-10 04:41:27

+0

考虑你的编辑。现在你有解析文件和纠正任何相对/绝对路径的问题,以便它们正确显示。图像路线是最简单的。 – 2009-08-10 05:06:17

+0

这是正确的,但并不困难。我看不出如何渲染页面并拍摄图像,是最简单的方法。最糟糕的情况是,您可以在每个用户会话中存储所有CSS,并确保您是否更改图像,还可以更改其名称。或者只要确保首先通过相对路径使用所有内容,这意味着如果您正确地使用它,则根本不需要更改HTML中的路径。我们在这里做了,除了一些最初的数据库问题,它像一个魅力。 – 2009-08-10 05:22:08

根据您的需求的具体情况也许你可以逃脱使用许多免费的网页缩略图服务之一?例如,您可以每月产生数千个/不收费的广告。(没有使用过,只是使用'免费缩略图服务')来找到它。

仅有T热