如何在JavaScript客户端截图网站/ Google如何做到这一点？(无需访问硬盘)

Question

我正在研究需要渲染页面并在客户端(浏览器)端制作屏幕截图的Web应用程序.

我不需要将屏幕截图保存在本地硬盘上,只需将其保存在RAM中并稍后将其发送到应用程序服务器即可.

我研究过:

但这些都没有给我我所需要的一切,这是:

最后我找到了谷歌的反馈工具(点击YouTube页脚上的"反馈"来查看此内容).它包含用于JPG编码的JavaScript和另外两个巨大的脚本,我无法确定它们到底做了什么......

但它是在客户端进行处理的 - 否则将这个巨大的JPEG编码器放入代码中就没有意义了!

任何人都知道他们是如何制作的/我如何制作它？

以下是反馈示例(在某些屏幕上报告错误)

反馈/报告错误示例

Answer 1

您可以使用JavaScript/Canvas来完成这项工作,但它仍然是实验性的.

对于迟到的人...现在可以通过...`navigator.mediaDevices.getDisplayMedia({video: true})`然后`const stream = wait startCapture();``const track = stream.getVideoTracks来完成()[0];` `let imageCapture = new ImageCapture(track);` 最后 `imageCapture.grabFrame()` 并返回带有图像位图的承诺。 (4认同)
谢谢,但是,引用:"可能不是100%准确的真实表示,因为它没有制作实际的截图".不适合我 :(. (3认同)
@PawelSzymańskiGoogle反馈也不是100%准确.尝试添加一些列表项(使用默认图标),尝试使用不同浏览器上的文本下划线(例如FF与Chrome相比),使用高字体(为了更好的可见性),或者只是一堆不同的更罕见的CSS3属性.你会发现它远远不是100%,除非你想用Javascript原生地做它,它目前是唯一的选择. (2认同)

Answer 2

我需要对页面上的div进行快照(对于我编写的webapp),它受到JWT的保护并且非常大量地使用Angular.

我没有任何上述方法的运气.

我最终得到了我需要的div的outerHTML,清理了一点(*),然后将它发送到我运行wkhtmltopdf的服务器.

这对我来说非常好.

(*)我的页面中的各种输入设备在pdf中查看时没有呈现为已检查或具有文本值...所以我在html上运行了一些jQuery,然后再发送它进行渲染.例如:对于文本输入项 - 我将它们的.val()复制到'value'属性中,然后可以通过wkhtmlpdf查看