类似于屏幕截图，使用JavaScript进行DOM截图？

Question

我正在开发一个Web应用程序，希望能够第一手了解我们的用户如何使用我们的软件。我的想法是：

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

编写JavaScript代码来根据录制更新DOM，并生成图像以复制相应浏览器中鼠标的移动轨迹。

这种方法是否曾经被尝试过？是否适用于大多数情况？

- Himmators

---

我不知道你是否可以记录一个正在使用的网页，但是你可以使用插件http://html2canvas.hertzen.com/每5秒钟截屏一次整个HTML页面，并将其存储在你的数据库中作为Base64图像。这些图像可以在你的CMS中解码以供查看。 - CIRCLE

一个DOM变化监听器和鼠标跟踪可能会解决你的问题。 - atomman

Answer 1

如circle73所说，您可以使用HTML5通过canvas来实现，但我认为这不会跟踪鼠标位置。您可以编写JavaScript函数以每x秒跟踪鼠标坐标，只需将其与屏幕截图配对即可匹配捕获的帧中的鼠标移动。

您的另一个选择是通过ActiveX控件来完成，如此处所答复：使用JavaScript拍摄网页的屏幕截图？

- Jeff Wooden

Answer 2

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

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

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

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

   这会将其从当前位置移动到新的坐标。更多信息请参阅此处。

3. 使用Selenium WebDriver对页面进行截图。更多信息请参阅此处。

- Marty Cortez