javascript - 使用HTML5 / Canvas / JavaScript获取浏览器屏幕截图

Google的“报告错误”或“反馈工具”允许您选择浏览器窗口的一个区域来创建一个屏幕截图,该截图与您对错误的反馈一起提交。
由Jason Small拍摄的截图,发布在Aduplicate question上。
他们是怎么做到的?Google的javascript反馈API是从here加载的,并且their overview of the feedback module将演示屏幕截图功能。


最佳答案:

javascript可以读取DOM,并使用canvas呈现一个相当精确的DOM表示。我一直在编写一个将HTML转换为画布图像的脚本。今天决定像您描述的那样执行它来发送反馈。
该脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图是基于DOM的,因此可能不完全精确到真实的表示,因为它不会生成实际的屏幕截图,而是基于页面上的可用信息构建屏幕截图。
它不需要从服务器进行任何渲染,因为整个图像是在客户机的浏览器上创建的。HTML2canvas脚本本身仍然处于非常实验的状态,因为它没有解析我希望它解析的CSS3属性,也不支持加载CORS图像,即使有代理可用。
浏览器兼容性仍然相当有限(不是因为无法支持更多功能,只是没有时间让它更受跨浏览器支持)。
有关更多信息,请查看以下示例:
http://hertzen.com/experiments/jsfeedback/
编辑
html2canvas脚本现在可以单独使用here和一些examples here
编辑2
谷歌反馈团队的Elliott Sprehn在本演示文稿中还确认了谷歌使用非常相似的方法(事实上,基于文档,唯一的主要区别是它们的异步遍历/绘制方法):
http://www.elliottsprehn.com/preso/fluentconf/