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

Question

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

你可以选择一个部分来突出显示，部分停电。 在下一步中，会创建一个截图（??），您可以预览其他浏览器信息的传输方式。

那么Google如何创建该截图？它发送完整的修改过的DOM用于服务器端处理吗？还有其他什么黑魔法？

Answer 1

亮点和黑点只是HTML divs。 该页面的屏幕截图是一个画布。

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

这里的开发工具与高光元素的一个截图突出显示，以表明它是一个div：

有一个帆布：

当对话中这样说：

请稍候，我们正在为您简单快捷地查看页面，以便让您亮显的地点为 。

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

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

我不知道他们是怎么做虽然在“高亮文本”的一部分。

Answer 2

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

Answer 3

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