Google+反馈系统的屏幕截图部分如何工作? [英] How does the Screenshot part of the Google+ Feedback system work?

问题描述

我没有邀请，但已在TWIG上使用. 它的工作方式如下:

I don't have an invite but it been used on TWIG. It works as following:

您可以选择要突出显示的部分，要进行遮光的部分. 在下一步中，将创建该屏幕快照(??)的屏幕快照，您可以预览传输的其他浏览器信息.

You can select a parts to highlight, parts to blackout. In the next step a screenshot of that is created (??) and you can preview what other browser information is transmitted.

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

So how does Google create that screenshot? does it send the complete modified DOM for server-side processing? or what other black magic is involved here?

推荐答案

突出显示和黑屏只是HTML divs. 页面的屏幕截图是画布.

The highlights and black outs are just HTML divs. The screenshot of the page is a canvas.

我使用Chrome的开发人员工具来确认这一点.它甚至可以在Firefox和Internet Explorer中使用，因此绝对不只是Chrome.

I used Chrome's developer tools to confirm this. It even works in Firefox and Internet Explorer, so it definitely isn't just a Chrome thing.

以下是开发人员工具的屏幕截图，其中突出显示了突出显示的元素之一，以表明它是div:

Here's a screenshot of developer tools with one of the highlight elements highlighted to show that it is a div:

有一张画布:

对话框显示以下内容:

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

Please wait while we take a snapshot of the page so you can highlight the relevant areas.

似乎正在服务器上渲染该页面的屏幕快照(因为网络"选项卡中有一个请求，它与快照和根据请求URL中的变量的反馈有关)，然后将其放置页面上的屏幕截图.

It seems to be rendering a screenshot of the page on the server (as there is a request in the Network tab and it has to do with a snapshot and the feedback according to the variables in the request URL) and then it places the screenshot over the page.

单击下一步"后，将打开另一个对话框，其中包含所有信息，并渲染最终的屏幕快照，其中包括突出显示的内容和不完整的内容.

After you click on "Next," another dialog opens with all of the information and renders the final screenshot with your highlights and black outs in it.

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

I'm not sure how they did the "Highlighted Text" part though.

这篇关于Google+反馈系统的屏幕截图部分如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！