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

Question

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

您可以选择要突出显示的部件，停电部件。 在下一步中，创建了截图（??），您可以预览其他浏览器信息的传输。

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

Answer 1

高光和黑屏只是HTML divs。 该页面的屏幕截图是画布。

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

以下是开发人员工具的屏幕截图，其中一个突出显示的元素突出显示为div：

有一个画布：

当对话框显示：

  

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

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

单击“下一步”后，将打开另一个包含所有信息的对话框，并在其中显示最终屏幕截图，其中包含高亮显示和黑屏。

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

Answer 2

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

Answer 3

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