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

Posted 2023-03-05

【中文标题】如何在 JavaScript 客户端截取网站/谷歌是如何做到的？ （无需访问硬盘）[重复]

【英文标题】：How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD) [duplicate]

【发布时间】：2011-08-03 01:48:54

【问题描述】：

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

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

我研究过：

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

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

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

最终我发现了 Google 的反馈工具（点击 YouTube 页脚上的“反馈”即可查看）。它包含javascript for JPG encoding 和另外两个巨大的脚本，我无法确定它们到底在做什么......

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

有人知道他们是如何做到的/我是如何做到的吗？

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

【问题讨论】：

这个SO问题可能对***.com/questions/60455/…有帮助

@ZachSaucier 谢谢，但正如另一个答案中所述：“可能不是 100% 准确到真实表示，因为它没有制作实际的屏幕截图”

@Michał Perłakowski 这个问题比标记为重复的问题有更多的深度和解决方案。 I any 然后另一个应该被标记为重复。

另见***.com/a/32776834/207981

拍摄“正确”的屏幕截图将绕过 XSS 保护，因为您将能够看到您不应访问的跨域 iframe。因此，我认为不可能也不会实施。例如，通过使用 Facebook 社交小部件并截取页面截图，您将能够看到登录 Facebook 的任何访问者的姓名。

【参考方案1】：

This answers your problem.

您可以使用 JavaScript/Canvas 来完成这项工作，但它仍处于试验阶段。

更新：

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

【讨论】：

谢谢，但就是这样，引用：“可能不是 100% 准确到真实的表示，因为它没有制作实际的屏幕截图”。不适合我:(。

那么我相信 flash 适合你 coldfusion.se/devnet/air/flex/articles/air_screenrecording.html 但我怀疑它是否会在网页上轻松实现这一点，因为这样的屏幕抓取可能会被用于恶意行为和侵犯隐私

@Pawel Szymański Google 反馈也不是 100% 准确的。尝试添加一些列表项（使用默认图标），尝试在不同的浏览器（例如 FF 与 Chrome 相比）上使用高字体大小（以获得更好的可见性）的文本下划线，或者只是一堆不同的更罕见的 CSS3 属性。您会发现它也远非 100%，除非您想仅使用 Javascript 本地化，否则它目前是唯一的选择。

对于迟到的人... 现在可以通过... navigator.mediaDevices.getDisplayMedia(video: true) 然后 const stream = await startCapture(); const track = stream.getVideoTracks()[0]; let imageCapture = new ImageCapture(track); 最后 imageCapture.grabFrame() 来完成，这会返回一个带有图像位图。

【参考方案2】：

我需要在受 JWT 保护并大量使用 Angular 的页面（对于我编写的 web 应用）上创建一个 div 的快照。

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

我最终获取了我需要的 div 的 outerHTML，稍微清理了一下 (*)，然后将其发送到我对它运行 wkhtmltopdf 的服务器。

这对我来说非常很好。

(*) 我的页面中的各种输入设备在 pdf 中查看时没有呈现为选中状态或具有它们的文本值...所以我在 html 上运行了一点 jQuery，然后将其发送给呈现。例如：对于文本输入项——我将它们的 .val() 复制到“值”属性中，然后可以通过 wkhtmlpdf 看到

【讨论】：

您可以使用 Grabz 使用类似的技术它是免费的HTML to Image JavaScipt API 您只需要确保网页 HTML 中的所有资源、CSS、Javascript 和图像文件等都需要使用绝对 URL，然后您使用JavaScript 获取外部 HTML 并将其传递给 GrabzIt 的 API。