如何像Google+一样进行页面截图
How to take page screenshots like Google+
在使用Google+的反馈后,我注意到它可以截图,还允许你做一些事情,比如高亮和黑色部分。我想知道这是如何实现的;基于这样的事实,你可以修改DOM与高光和黑色,我认为它只是采取整个DOM,并把它变成一个图像,然而,我不确定他们是如何做到这一点。
我知道PHP有几个函数,'imagegrabscreen'和'imagegrabwindow',但它们只适用于Windows用户,所以我怀疑这是他们正在使用的。
所以,我的问题是他们如何把DOM变成一个图像?
Google+并不完全在客户端截图。它将本地(渲染)DOM发送到服务器,将其渲染为图像,并返回创建的图像。
您可以通过向页面添加本地图像(使用Firebug)来测试这一点,然后尝试创建一个反馈。该图像将不存在
JavaScript可以读取DOM并使用canvas
呈现相当准确的表示。我一直致力于将html转换为画布图像的脚本。今天决定像你描述的那样把它实现成发送反馈。
脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图,以及表单。该截图是基于DOM的,因此可能不是100%准确的真实表示,因为它没有制作实际的截图,而是根据页面上可用的信息构建截图。
它不需要服务器的任何渲染,因为整个图像是在客户端浏览器上创建的。HTML2Canvas脚本本身仍然处于非常实验性的状态,因为它没有解析我想要的CSS3属性,也没有任何支持加载CORS图像,即使代理可用。
浏览器兼容性仍然很有限(不是因为不支持更多,只是没有时间让它更跨浏览器支持)。
有关更多信息,请查看这里的示例:
http://hertzen.com/experiments/jsfeedback/我的猜测是他们收集有关问题页面的信息,突出显示块等,在web浏览器的内存版本中呈现该页面并截取它的屏幕截图。
编辑方式:
如果客户端正在查看http://some.page?someArg = someValue
服务器呈现http://some.page?someArg=someValue在内存浏览器中截取截图,将图像发送给客户端
- 如何在Google柱状图中动态添加行/列
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- 使用Google Visualization动态调用构造函数
- Firebase2(Firebase.google.com)推送通知-从外部管理
- 是否可以控制获取哪些Google地图脚本(JavaScript API)
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- Google Adsense多次加载脚本
- 单击超链接时,如何使用Google Maps API v3缩放地图
- Google电子表格getValue([cell containing ])不返回制表符
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 实现一个建立在google.com之上的自定义搜索引擎
- 使用Google Maps API向标记添加多个字符
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 回调函数中传递参数的困难(Google Map API Markers)
- 在Chrome扩展内部输出Google API调用
- 如何使用Google Sheets API+Javascript阅读电子表格
- 如何使用javascript更改google repatcha的大小
- Tumblr和google+如何像拼图一样堆叠图像
- 像Google+一样的边界
- 如何像Google+一样进行页面截图