4

我正在尝试实现一个网站的截屏，而不需要任何软件，只需要一个浏览器。没有必要对网站进行真正的截屏。也许用浏览器，视口分辨率，滚动像素等信息“重建”网站是一个很好的解决方案。它仅用于网站的解释之旅，它的功能。

我目前的解决方案：该脚本正在使用 html2canvas ( http://html2canvas.hertzen.com/ ) 对网站进行“截图”。然后我将屏幕截图作为 base64 编码的 png 数据传输到接收器。他们对其进行解码并将其绘制到那里的网站。

但是 html2canvas 需要大约 1 秒来生成一个画布（带有纯文本网站）。为带有图像的网站生成它大约需要 5-10 秒。那就是太长了。

你有其他方法的想法吗？

4

2 回答 2

5

您是否考虑过在页面上捕获事件并将它们显示在另一侧？（也许有一个透明的覆盖来阻止用户交互）

一旦记录器发送屏幕大小等，iframe 可用于在另一侧显示相同的网页。然后将事件处理程序添加到文档并监听常见事件，如点击、按键等。

[ 'click', 'change', 'keypress', 'select', 'submit', 'mousedown'].forEach(function(event_name){
    document.documentElement.addEventListener(event_name, function(e){
        // send event to the other side using Socket.IO or web sockets
        console.log(getSelector(e.target), e.type);
    }, true);
});

在播放站点上，您只需查找选择器并触发事件。找到元素的 CSS 选择器可能有点棘手，但下面的代码将是一个好的开始。

https://github.com/ebrehault/resurrectio/blob/master/recorder.js#L367

于 2015-10-07T06:08:59.190 回答
2

您可以考虑的是在一端捕获用户输入事件，然后在另一端模拟它。这可以实时完成——将鼠标和按键事件转换为流——然后将其发送到客户端的模拟器。见这篇文章：https ://gist.github.com/staltz/868e7e9bc2a7b8c1f754

您还可以捕获带有时间戳的流并将其发送到数据存储，这实际上创建了一个类似数组的日志，它在时间序列中为您提供一个接一个的项目。然后，您可以将此日志输入到 RxJS 之类的反应库中，并在客户端上播放预定事件。

对于模拟，应该有一些库（我想 jQuery 也可以工作）。例如http://yuilibrary.com/yui/docs/event/simulate.html

于 2015-10-08T05:21:31.087 回答