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

IT技术 javascript screenshot capture google-search
2021-01-21 11:20:29

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

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

我研究过：

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

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

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

最终我找到了 Google 的反馈工具（点击 YouTube 页脚上的“反馈”可以看到这个）。它包含用于 JPG 编码的 JavaScript和另外两个巨大的脚本，我无法确定它们究竟是做什么的......

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

任何人都知道他们是如何做到的/我如何做到的？

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

反馈/报告错误示例

2个回答

这可以解决您的问题。

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

更新：

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

谢谢，但那是引用：“可能不是 100% 准确的真实表示，因为它没有制作实际的屏幕截图”。不适合我 ：（。
2021-03-20 11:20:29
@Pawel Szymański 谷歌反馈也不是 100% 准确。尝试添加一些列表项（使用默认图标），尝试在不同浏览器（例如 FF 与 Chrome 相比）上使用高字体大小（以获得更好的可见性）的文本下划线，或者只是一堆不同的更罕见的 CSS3 属性。您会发现它也远非 100%，除非您想仅使用 Javascript 本地完成它，否则它目前是唯一的选择。
2021-03-27 11:20:29
那么我相信闪存是你coldfusion.se/devnet/air/flex/articles/air_screenrecording.html 但我怀疑它是否会允许这种毫不费力地在网页上为这样的屏幕抓取可能被用于恶意行为和侵犯隐私
2021-03-28 11:20:29
对于迟到的人......现在可以通过......navigator.mediaDevices.getDisplayMedia({video: true})然后const stream = await startCapture(); const track = stream.getVideoTracks()[0]; let imageCapture = new ImageCapture(track);最后imageCapture.grabFrame()并返回带有图像位图的Promise。
2021-04-05 11:20:29

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

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

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

这对我来说非常有效。

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

您可以使用 GrabzIt 的免费HTML to Image JavaScipt API使用类似的技术，您只需要确保网页 HTML 中的所有资源、CSS、Javascript 和图像文件等都需要使用绝对 URL，然后您使用 JavaScript 来获取外部 HTML并将其传递给 GrabzIt 的 API。
2021-03-27 11:20:29
其它你可能感兴趣的问题
上一篇使用 jQuery 转义键的键码 下一篇AJAX Mailchimp 注册表单集成