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

我正在开发一个web应用程序，它需要在客户端（浏览器）呈现一个页面并制作一个屏幕截图

我不需要将屏幕截图保存在本地硬盘上，只需将其保存在RAM中，然后发送到应用服务器

我研究过：

浏览器服务

机械化浏览器

WKHTMLTO图像

pythonwebkit2png

但这些都不能满足我的需要，那就是：

在浏览器端处理（生成页面的屏幕截图）。不需要保存在硬盘上！只是

…将图像发送到服务器进行进一步处理

捕获整个页面（不仅仅是可见部分）

最终我找到了谷歌的反馈工具（点击YouTube页脚上的“反馈”来查看）。它包含和另外两个巨大的脚本，我不能确定它们到底做什么

但是它是在客户端处理的——否则在代码中加入这个巨大的JPEG编码器就没有意义了

有人知道他们是怎么做到的吗

下面是一个反馈示例（报告某些屏幕上的错误）

“https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots/6678156#6678156“回答你的问题

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

更新：

---

现在有了一个库

我需要在页面上快照一个div（我写的一个webapp），这个div受JWT的保护，并且大量使用Angular

上述任何一种方法我都不走运

我最终得到了我需要的div的outerHTML，对它进行了一些清理（*），然后将它发送到服务器，在那里我对它运行了wkhtmltopdf

这对我来说很有效

---

（*）我的页面中的各种输入设备在pdf中查看时未显示为选中状态或文本值。。。因此，在发送html进行渲染之前，我在html上运行了一点jQuery。例如：对于文本输入项——我将它们的.val（）复制到“value”属性中，然后wkhtmlpdf可以看到这些属性，所以这个问题可能会对@Zachsauier有所帮助，谢谢，但正如另一个答案中所描述的：“可能与真实表示不完全一致，因为它不会生成实际的屏幕截图。”@米查·佩尔·阿科夫斯基这个问题比被标记为重复的问题有更深入的讨论和解决方案。我认为另一个应该被标记为重复。另外，请参阅拍摄“正确”的屏幕截图将绕过XSS保护，因为您可以看到您不应该访问的跨域iFrame。因此，我认为这是不可能的，也不会实施。例如，通过使用Facebook社交小部件并拍摄页面截图，您将能够看到登录Facebook的任何访问者的姓名。谢谢，但这是一句话：“可能不是100%准确的真实表现，因为它不会生成实际的截图”。不适合我：（。那么我相信flash适合你，但我怀疑它是否会允许轻松地在网页上进行此操作，因为这样的屏幕抓取可能用于恶意操作和隐私invasion@PawelSzymanński谷歌反馈也不是100%准确。尝试添加一些列表项（带有默认图标），尝试在不同浏览器上添加文本下划线（例如，FF与Chrome相比）具有较大的字体大小（以提高可见性），或者只是一堆不同的更罕见的CSS3属性。你会发现它也远不是100%，除非你想用Javascript本机实现它，否则它目前是唯一的选择。对于迟到的人来说…现在可以用…

navigator.mediaDevices.getDisplayMedia（{video:true}）来实现

然后

const stream=wait startCapture（）；

const track=stream.getVideoTracks（）[0]；

让imageCapture=new imageCapture（track）；

最后

imageCapture.grabFrame（）

这将返回一个带有图像位图的承诺。您可以使用GrabzIt免费的类似技术，只需确保网页HTML中的所有资源、CSS、Javascript和图像文件等都需要使用绝对URL，然后使用Javascript获取外部HTML并将其传递给GrabzIt的API即可。