如何在JavaScript客户端截图网站/谷歌是如何做到的？（无需访问硬盘）

javascript screenshot capture google-search

2022-08-30 00:45:03

我正在开发需要呈现页面并在客户端（浏览器）端制作屏幕截图的Web应用程序。

我不需要将屏幕截图保存在本地HDD上，只需将其保存在RAM中，然后将其发送到应用程序服务器即可。

我研究了：

但这些都没有给我所需要的一切，那就是：

最终，我遇到了谷歌的反馈工具（点击YouTube页脚上的“反馈”来查看这个）。它包含用于JPG编码的JavaScript和其他两个巨大的脚本，我无法确定它们到底做了什么......

但它是在客户端处理的 - 否则在代码中放置这个巨大的JPEG编码器是没有意义的！

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

以下是反馈的示例（在某些屏幕上报告错误）

Feedback/report bug example

答案 1

你可以使用JavaScript/Canvas来完成这项工作，但它仍然是实验性的。

更新：

现在有一个图书馆 https://html2canvas.hertzen.com/

答案 2

我需要在页面上拍摄一个div（对于我写的web应用程序），该div受JWT保护，并且大量使用Angular。

我对上述任何一种方法都没有运气。

我最终采用了我需要的div的outerHTML，稍微清理了一下（*），然后将其发送到我运行wkhtmltopdf的服务器。

这对我来说非常有效。

（*）我的页面中的各种输入设备在pdf中查看时未呈现为选中或具有其文本值...因此，在发送它进行渲染之前，我在html上运行了一点jQuery。例如：对于文本输入项 - 我将它们的.val（）复制到“value”属性中，然后可以通过wkhtmlpdf看到