使用JavaScript捕获网站截图

Question

我看到有类似的问题，但答案都不太符合我的要求。由于这个问题稍有不同，我再次提问 - 希望您会同意这不是重复问题。

我想做什么：生成一张图片，显示用户（实际上是每个特定的用户）在我的网站上看到的内容。

我为什么要这样做：我有一些代码，可以识别页面上用户鼠标悬停时间较长的区域（人们倾向于将鼠标移动到感兴趣的区域），我还记录点击位置。这些被记录为相对于页面左上角的X/Y坐标。

注：这仅适用于进行可用性测试的用户。

我最好能够捕获屏幕截图，然后使用服务器端工具在图像上叠加鼠标数据（热点、鼠标路径等）。

我的问题是页面内容非常动态（在服务器端生成期间而不是显示期间）- 根据用户类型、分配的角色等...整个框可能会缺失- 其余布局会相应调整- 因此没有单个“正确”的页面截图。

选项1（感觉有点不好）：遍历DOM并序列化它，然后将其发送回服务器。然后我会打开适当的浏览器并反序列化DOM。这应该可以工作，但听起来很难自动化。我怀疑还会出现一些相对URL等问题。

选项2：页面加载完成后，捕获客户端区域的图像（我最好能够捕获整个页面长度，但我认为这将更加困难）。大多数页面不需要滚动，因此这不应该是一个主要问题- 版本2中需要改进的内容。然后，我将通过AJAX将此图像上传到服务器。

注：我不想看到页面内容以外的任何东西（chrome、地址栏、任何东西）。

我希望能够在不安装任何东西在最终用户PC上完成此操作（因此使用JavaScript）。如果唯一可能性是客户端应用程序，我们可以这样做，但在获取随机用户进行可用性测试时会更麻烦（目前，我们只需向朋友/家人/豚鼠发送不同的URL电子邮件即可）。

- Basic

Answer 1

一种替代方案是“记录”页面上主要结构元素的位置和尺寸：

（使用jQuery）

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

然后您将序列化的pageStructure与鼠标数据一起发送，根据该数据，您可以重建给定页面的布局。

- Šime Vidas

---

这是一个好主意 - 远比发送整个DOM（一种铁锤式方法）要好得多。 - Basic

@Basiclife 是的，任何事情都比序列化整个DOM好 :) （那真的可能吗？）。请注意，我将代码更改为 outerWidth 和 outerHeight。 - Šime Vidas

我认为这是可能的（考虑到某些属性由于安全问题而无法读取等因素...）- 肯定足以重建页面布局。话虽如此，一想到这个就让我毛骨悚然... 感谢您指出这个变化，否则我会错过它。 - Basic

Answer 2

在我工作的地方，我们经常谈论的一件事是拥有权与从头开始制作某物所需成本之间的价值。凭借我们的团队，我们可以建造几乎任何东西......然而，以每小时100美元的费率计算，它需要是一个相当有市场价值的工具或替代一个非常昂贵的产品，才值得我们花费时间。因此，对于像这样已经完成的事情，我会首先考虑寻找其他选择。想想你可以用所有这些额外的时间做什么....

一个简单快速的谷歌搜索发现了这个：http://www.trymyui.com/ 它可能不完美，但它指出了这样的解决方案已经存在并且已经在工作/测试中。或者，您可以下载一个脚本，例如this heatmap 显然，您需要添加一些内容，以便在创建地图时重新创建屏幕上的内容。

祝好运。

- bpeterson76

---

提出了一个非常有价值的观点，谢谢 - 我一定会考虑其他选择。 - Basic

Answer 3

在我看来，重新发明轮子是不值得的。只需购买像ClickTale这样的现有解决方案即可。

http://www.clicktale.com/

- Geoff

---

我必须承认，我通常会回避COTS解决方案，因为它们往往价格过高和/或开发不良。话虽如此，Clicktale似乎提供了令人惊讶的有用信息，所以感谢您的指引。 - Basic