使用HTML5/Canvas/JavaScript在浏览器中截取屏幕截图

Question

Google的“报告错误”或“反馈工具”可让您选择浏览器窗口的某个区域，以创建一个屏幕截图，其中附有关于错误的反馈。

_{截图由Jason小，张贴在duplicate question。}

他们是怎么做到的？谷歌的JavaScript反馈API从here加载，their overview of the feedback module将演示截图功能。

Answer 1

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

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

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

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

欲了解更多信息，看看这里的例子：

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

编辑 的html2canvas脚本现已分别here和一些examples here。

编辑2 ，谷歌采用了非常类似的方法，（在基于文档事实上的唯一的主要区别是他们的异步遍历/绘图的方法），另一种确认可以在此演示文稿由埃利奥特Sprehn从发现谷歌反馈团队： http://www.elliottsprehn.com/preso/fluentconf/

Answer 2

您的Web应用程序可以使用getUserMedia()现在把客户的整个桌面的“天然”截图：

有一个看看这个例子：

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

客户端必须使用chrome（现在），并且需要在chrome：//标志下启用屏幕捕获支持。