我没有邀请，但它已在 TWIG 上使用。它的工作原理如下：
您可以选择要突出显示的部分，要涂黑的部分。在下一步中，将创建一个屏幕截图 (??)，您可以预览传输的其他浏览器信息。
那么谷歌是如何创建这个屏幕截图的呢？它会发送完整修改的 DOM 以进行服务器端处理吗？或者这里还涉及什么其他黑魔法？
问问题
4849 次
3 回答
11
高光和黑屏只是 HTML divs。该页面的屏幕截图是一个画布。
我使用 Chrome 的开发者工具来确认这一点。它甚至可以在 Firefox 和 Internet Explorer 中运行，因此它绝对不仅仅是 Chrome 的东西。
这是开发人员工具的屏幕截图，其中一个突出显示的元素突出显示它是div：
有一个画布：
当对话框这样说时：
请稍候，我们正在对页面进行快照，以便您突出显示相关区域。
它似乎正在服务器上呈现页面的屏幕截图（因为“网络”选项卡中有一个请求，它与快照和根据请求 URL 中的变量的反馈有关），然后将屏幕截图放在这页纸。
单击“下一步”后，将打开另一个对话框，其中包含所有信息，并呈现最终的屏幕截图，其中包含高光和黑点。
不过，我不确定他们是如何完成“突出显示的文本”部分的。
于 2011-07-20T19:17:35.807 回答
2
它可以将整个 DOM 树发送到服务器并在另一端呈现。
于 2011-07-03T17:54:25.403 回答
0
不知道该功能，但您如何描述它；它不是跨平台功能，也不在规范中。您正在寻找canvas 元素的drawWindow。然后他们对画布进行 base64/urlencode 并将其发送到服务器。可以想象他们使用服务器端黑魔法来支持 IE6 支持.. 或者他们让 google+ 成为 html5 浏览器唯一的东西..
于 2011-06-29T22:31:43.087 回答