使用javascript进行DOM捕获的屏幕截图？

Question

我正在开发一个网络应用程序，我想亲身体验一下我们的用户如何使用我们的软件。这是我的想法：

*使用javascript保存html-DOM和光标位置。可能只对DOM进行了更改以减少数据量。 *将其与使用的用户浏览器一起保存到服务器。

根据录制内容更新DOM以及在相应浏览器中复制鼠标移动的图像。

之前有过这样的事吗？ 在大多数情况下这会起作用吗？

Answer 1

正如circle73所说，你可以使用HTML5通过画布来做到这一点，但是，我认为这不会跟踪鼠标的位置。您可以编写一个JavaScript函数来每隔x秒跟踪鼠标坐标，您只需要使用屏幕捕获计时，这样就可以将鼠标移动与捕获的帧匹配。

您的其他选择是通过ActiveX控件执行此操作，如下所示：Take a screenshot of a webpage with JavaScript?

Answer 2

我会采用以下高级策略来解决这个问题：

1. 使用jQuery mouseover记录用户在页面上的鼠标位置。在本地存储这些位置（x，y坐标）。使用这些坐标向您的服务器发送结构化请求。

2. 使用Selenium等浏览器自动化框架“播放”存储的坐标。您可以使用与用户相同的路径，仅在开发中使用，以便查看他看到的内容。例如：

   void mouseMove(WebElement toElement, long xOffset, long yOffset)
   

   这会（从当前位置）移动到新坐标。还有更多信息here。

3. 使用Selenium WebDriver获取页面的屏幕截图。更多信息here。