使用 javascript 捕获网站截图

Question

我看到有人问过类似的问题，但答案并不完全符合我的要求。由于这个问题略有不同，我再问一次 - 希望你同意这不是重复的。

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

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

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

理想情况下，我希望能够捕获屏幕截图，然后使用服务器端的某些东西将鼠标数据覆盖在图像上（热点、鼠标路径等）

我遇到的问题是页面内容是非常动态的（在显示期间不是那么多，而是在服务器端生成期间） - 取决于用户类型、分配的角色等......整个框可能会丢失 - 并且布局的其余部分会相应地重新调整 - 因此页面没有单一的“正确”屏幕截图。

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

选项 2：页面加载完成后，捕获客户区的图像（我希望捕获页面的整个长度，但怀疑这会更难）。大多数页面不需要滚动，所以这不应该是一个主要问题 - 版本 2 需要改进。然后我会通过 AJAX 将此图像上传到服务器。

注意：我不想看到我自己页面内容之外的任何内容（chrome、地址栏等）

我希望能够做到这一点，而无需在最终用户电脑上安装任何东西（因此是 javascript）。如果唯一的可能性是客户端应用程序，我们可以这样做，但这意味着在让随机用户进行可用性测试时会更加麻烦（目前，我们只是通过电子邮件向朋友/家人/豚鼠发送不同的 URL）

Answer 1

IMO，不值得重新发明轮子。只需购买 ClickTale 等现有解决方案即可。

http://www.clicktale.com/

Answer 2

我们经常谈论我工作的地方的一件事是所有权的价值与从头开始制作东西所需的成本。有了我的团队，我们几乎可以建造任何东西……但是，以每小时 100 美元的速度计算，它需要是一个非常有市场的工具或替换一个非常昂贵的产品，它才值得我们花时间.因此，当涉及到已经完成的此类事情时，我会考虑先寻找其他地方。想想你可以用这些额外的时间做什么......

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

祝你好运。

Answer 3

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

（使用 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 与鼠标数据一起发送，并根据该数据重建给定页面的布局。