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

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

我研究:

类似BrowserShots的服务… 机械化浏览器… wkhtmltoimage…… Python WebKit2PNG……

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

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

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

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

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

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


这就解决了你的问题。

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

更新:

现在有一个这样的库https://html2canvas.hertzen.com/


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

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

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

这对我来说很有效。

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