如何在JavaScript客户端截屏网站/谷歌怎么做的?(无需存取硬盘)

我正在工作的web应用程序,需要渲染一个页面,并在客户端(浏览器)端进行截图。

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

我研究:

  1. 类似BrowserShots的服务…
  2. 机械化浏览器…
  3. wkhtmltoimage……
  4. Python WebKit2PNG……

但这些都不能满足我的全部需求,那就是:

  1. 浏览器端处理(生成页面截图)。不需要保存在硬盘上!只是…
  2. ...将图像发送到服务器进行进一步处理。
  3. 捕获整个页面(不仅仅是可见部分)

最后我发现了谷歌的反馈工具(点击YouTube页脚上的“反馈”可以看到)。它包含JavaScript用于JPG编码和另外两个巨大的脚本,我不能确定它们到底是做什么的…

但是它是在客户端处理的——否则就没有必要在代码中放入这个巨大的JPEG编码器!

谁知道他们是怎么做到的/我是怎么做到的?

下面是一个反馈的例子(在一些屏幕上报告一个错误)

反馈/报告错误示例

358368 次浏览

这就解决了你的问题

你可以使用JavaScript/Canvas来完成这项工作,但它仍处于实验阶段。

更新:

现在有一个用于https://html2canvas.hertzen.com/的库

我需要在页面上快照一个div(用于我写的一个webapp),它受到JWT的保护,并且大量使用了Angular。

以上任何一种方法我都没有成功。

我最终采取了我需要的div的outerHTML,清理它一点(*),然后将它发送到服务器,在那里我运行wkhtmltopdf对它。

这是工作非常好为我。

(*)在我的页面中的各种输入设备在pdf中查看时没有显示为选中或有它们的文本值……在渲染之前,我在html上运行了一点jQuery。例如:对于文本输入项-我复制他们的.val()到“值”属性,然后可以通过wkhtmlpdf看到