如何获取Google+等网页截图

Question

我注意到在使用Google +的反馈后，它会截取屏幕截图并允许您执行突出显示和遮挡部分等操作。我想知道如何实现这一目标;基于这样一个事实，即您可以使用高光和黑屏来修改DOM我假设它只是将整个DOM转换为图像，但是，我不确定它们是如何做到的。

我知道PHP有几个功能，'imagegrabscreen'和'imagegrabwindow'，但它们只适用于Windows用户，所以我怀疑这是他们正在使用的。

所以，我的问题是他们如何将DOM变成图像？

Answer 1

Google+不会完全在客户端截取屏幕截图。它将本地（渲染）DOM发送到服务器，将其渲染为图像，然后返回创建的图像。

您可以通过向页面添加本地图像（使用Firebug）进行测试，然后尝试创建反馈。那张照片不会出现。

Answer 2

JavaScript可以读取DOM并使用canvas呈现相当准确的表示形式。我一直在研究一个将html转换为画布图像的脚本。今天决定将其实施为发送您所描述的反馈。

该脚本允许您创建反馈表单，其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

不需要来自服务器的任何呈现，因为整个图像是在客户端浏览器上创建的。 HTML2Canvas脚本本身仍处于非常实验状态，因为它几乎不解析我想要的CSS3属性，即使代理可用，它也不支持加载CORS图像。

浏览器兼容性仍然非常有限（不是因为没有更多支持，只是没有时间让它更支持跨浏览器）。

有关更多信息，请查看此处的示例：

http://hertzen.com/experiments/jsfeedback/

Answer 3

我的猜测是，他们收集有关相关页面的信息，突出显示的块等。在内存版本的Web浏览器中呈现该页面，并截取它的截图。

修改 要澄清：

如果客户正在查看 http://some.page?someArg=someValue

服务器在内存浏览器中呈现 http://some.page?someArg=someValue 获取屏幕截图，将图像发送给客户端。