javascript - 使用javascript捕获网站截图

Question

我见过类似的问题，但答案并不完全是我想要的。由于这个问题略有不同，我再问一次 - 希望你会同意这不是重复的。

我想做的:生成一张图像，显示用户(实际上是每个特定用户)看到的我自己网站的内容。

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

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

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

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

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

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

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

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

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