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

Question

我没有邀请,但它在TWIG上使用过.它的工作原理如下:

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

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

Answer 1

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

我使用Chrome的开发者工具来确认这一点.它甚至适用于Firefox和Internet Explorer,所以它绝对不仅仅是Chrome的东西.

这是开发人员工具的屏幕截图,其中一个突出显示的元素突出显示它是div:

有一个画布:

当对话框显示:

请等待我们拍摄页面快照,以便您突出显示相关区域.

它似乎是在服务器上呈现页面的屏幕截图(因为在"网络"选项卡中有一个请求,它与快照和根据请求URL中的变量的反馈有关),然后它将屏幕截图放在这页纸.

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

我不确定他们是如何做"突出显示的文字"部分的.