如何截取 Google+ 等页面截图答案

【问题标题】：How to take page screenshots like Google+如何截取 Google+ 等页面截图
【发布时间】：2011-10-04 09:20:20
【问题描述】：

在使用 Google+ 的反馈后，我注意到它会截取屏幕截图，并且还允许您执行突出显示和黑屏等操作。我想知道如何实现这一点；基于您可以使用高光和黑点修改 DOM 的事实，我认为它只是将整个 DOM 转换为图像，但是，我不确定他们是如何做到这一点的。

我知道 PHP 有几个函数，“imagegrabscreen”和“imagegrabwindow”，但它们只适用于 Windows 用户，所以我怀疑这就是他们正在使用的。

那么，我的问题是他们如何将 DOM 转换为图像？

【问题讨论】：

毕竟应该是一种选择；您还可以将 DOM 转换为 PDF..
也许他们以某种方式利用了 Apps API，我发现了这个：code.google.com/chrome/extensions/experimental.clipboard.html，否则很多关于出于安全原因缺少 JS 访问剪贴板的帖子。有趣的问题！
@Jamie, imagegrabscreen 在 Web 服务器上运行并截取 Web 服务器的屏幕截图。这与这里无关。 :) 此外，Using HTML5/Canvas/Javascript to take screenshots 和 this question 可能重复。

【解决方案1】：

我的猜测是，他们收集了有关页面、突出显示的块等的信息。在内存版本的网络浏览器中呈现该页面并对其进行截图。

编辑清除：

如果客户正在查看 http://some.page?someArg=someValue

服务器在内存浏览器中呈现 http://some.page?someArg=someValue 截取屏幕截图，将图像发送给客户端。

【讨论】：

这里试用的是“并截屏”部分。 :)
这里的审判是什么？截取应用程序的屏幕截图？这有多大问题？你知道你可以在现代操作系统中做到这一点吗？
这适用于在浏览器中运行的 Web 应用程序。无论“操作系统”多么现代，这都不是没有问题的（参见this answer）。
我认为您误解了问题的上下文。此外，你真的需要冷静下来。 :)
Google+ 比 someArg=someValue 更复杂。提交反馈时，页面上的所有元素都必须与用户看到的内容相匹配，这一点很重要。对于一个高度个性化并严重依赖 AJAX 动态加载数据的网站，我认为someArg=someValue 并不现实。做出更好的答案，我会赞成。 :)

【解决方案2】：

Google+ 不会完全在客户端截取屏幕截图。它将本地（渲染）DOM 发送到服务器，将其渲染为图像，并返回创建的图像。

您可以通过向页面添加本地图像（使用 Firebug）然后尝试创建反馈来对此进行测试。该图像不会出现。

【讨论】：

他们确实将它完全呈现在客户端上。如果您提供的图像在同一域下不可用，他们会使用代理来获取它，但它会以与本地图像完全相同的方式呈现到画布上。
@blzm twitter.com/#!/ElliottZ/status/89520809147772929 - Google 反馈技术负责人。 + google.com/tools/feedback/intl/en/index.html 上的浏览器要求非常很好地了解了他们如何使用什么来执行许多任务
@Niklas，这很有趣。我会尝试更多地尝试他们的反馈机制。
@Dogbert github.com/niklasvh/html2canvas 你可能会感兴趣。仍处于相对早期的阶段，但由于所有内容都需要手动渲染，因此随着它的发展建立对更多 CSS/元素的支持。

【解决方案3】：

JavaScript 可以读取 DOM 并使用 canvas 呈现相当准确的表示。我一直在研究将 html 转换为画布图像的脚本。今天决定将其实现为发送您所描述的反馈。

该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

它不需要来自服务器的任何渲染，因为整个图像是在客户端浏览器上创建的。 HTML2Canvas 脚本本身仍处于非常实验性的状态，因为它几乎无法解析我想要的那么多 CSS3 属性，即使有可用的代理，它也不支持加载 CORS 图像。

浏览器兼容性仍然相当有限（不是因为不能支持更多，只是还没有时间让它更多地支持跨浏览器）。

【讨论】：