使用HTML5 / Canvas / JavaScript进入浏览器屏幕截图
Google的“报告错误”或“反馈工具”可让您select浏览器窗口的某个区域,以创build一个屏幕截图,并提交您的关于错误的反馈。
Jason Small截图,张贴在一个重复的问题 。
他们如何做到这一点? Google的JavaScript反馈API从这里加载, 他们对反馈模块的概述将展示截图function。
JavaScript可以读取DOM并使用canvas
呈现相当准确的表示。 我一直在努力将HTML转换成canvas图像的脚本。 今天决定把它实施成像你所描述的发送反馈。
该脚本允许您创build反馈表单,其中包括在客户端浏览器上创build的屏幕截图以及表单。 屏幕截图基于DOM,因此可能不是100%准确的真实表示,因为它没有制作实际的屏幕截图,而是根据页面上提供的信息构build屏幕截图。
它不需要服务器的任何渲染 ,因为整个图像是在客户端浏览器上创build的。 HTML2Canvas脚本本身仍然处于非常实验的状态,因为它不会parsing我希望的CSS3属性的几乎所有的属性,即使代理可用,它也不支持加载CORS映像。
浏览器的兼容性还是相当有限的(不是因为更多的不支持,只是没有足够的时间让它跨浏览器支持)。
欲了解更多信息,请看这里的例子:
http://hertzen.com/experiments/jsfeedback/
编辑 html2canvas脚本现在单独在这里和一些例子在这里 。
编辑2谷歌反馈团队的Elliott Sprehn在演示中可以find另一个Google使用非常相似的方法(实际上基于文档,唯一的区别是遍历/绘制的asynchronous方法)的确认: http: /www.elliottsprehn.com/preso/fluentconf/
现在,您的networking应用程序可以使用getUserMedia()
获取客户端整个桌面的“原生”屏幕截图:
看看这个例子:
https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/
客户端必须使用chrome(现在),并且需要在chrome://标志下启用屏幕截图支持。