Google+ 反馈系统的屏幕截图部分如何工作？答案

【问题标题】：How does the Screenshot part of the Google+ Feedback system work?Google+ 反馈系统的屏幕截图部分如何工作？
【发布时间】：2011-09-25 13:04:52
【问题描述】：

我没有邀请，但它已在 TWIG 上使用过。它的工作原理如下：

您可以选择要突出显示的部分，要涂黑的部分。在下一步中，将创建一个屏幕截图 (??)，您可以预览传输的其他浏览器信息。

那么 Google 是如何创建该屏幕截图的？它会发送完整的修改后的 DOM 以进行服务器端处理吗？或者这里还涉及什么其他黑魔法？

【问题讨论】：

复制：stackoverflow.com/questions/4912092/…

标签： javascript web-applications google-plus

【解决方案1】：

高亮和黑点只是 HTML divs。 页面截图为画布。

我使用 Chrome 的开发者工具来确认这一点。它甚至可以在 Firefox 和 Internet Explorer 中使用，所以它绝对不仅仅是 Chrome 的东西。

这是一个开发者工具的截图，其中一个突出显示的元素表明它是div：

只有一个画布：

当对话框这样说时：

请稍候，我们正在拍摄页面快照，以便您突出显示相关领域。

它似乎是在服务器上呈现页面的屏幕截图（因为“网络”选项卡中有一个请求，它与快照和根据请求 URL 中的变量的反馈有关）然后它放置页面上的屏幕截图。

单击“下一步”后，会打开另一个对话框，其中包含所有信息，并呈现最终的屏幕截图，其中包含您的高光和黑点。

我不确定他们是如何完成“突出显示的文本”部分的。

【讨论】：

【解决方案2】：

它可以将整个 DOM 树发送到服务器并在另一端呈现。

【讨论】：

这是我的第一个想法，因为 Google 确实有办法在服务器端呈现网站图像。我想对其进行测试，但我不想发送垃圾反馈来尝试捕获它。这种方法的唯一问题是它意味着不会出现任何渲染错误。

【解决方案3】：

不知道该功能，但您如何描述它；它不是跨平台功能，也不在规范中。您正在寻找画布元素的drawWindow。然后他们对画布进行 base64/urlencode 并将其发送到服务器。可以想象他们用服务器端的黑魔法来支持 IE6 支持.. 或者他们让 google+ 成为 html5 浏览器唯一的东西..

【讨论】：

我不认为整个事情都是<canvas>-tag。
看过“新”谷歌图片网站吗？他们就像一百万个画布标签（没有明显的原因）。它必须是画布，因为没有其他方法可以在客户端制作网站的打印屏幕（或者我不明白 Jakob Cosoroaba 所描述的 google+ 的功能是什么）
我在渲染的内容中看不到任何画布标签。我可能遗漏了一些，但毫无疑问，有些数据是普通的旧 HTML。