使用HTML5/Canvas/JavaScript截图

前端之家收集整理的这篇文章主要介绍了使用HTML5/Canvas/JavaScript截图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Google的“报告错误”或“反馈工具”可让您选择浏览器窗口中的某个区域,以创建随您的反馈提交的屏幕截图。

截图为Jason Small,发布于duplicate question

他们是怎么做的? Google的JavaScript反馈API从here加载,their overview of the feedback module将演示截图功能

解决方法

JavaScript可以读取DOM并使用画布渲染相当精确的表示。我一直在一个脚本,将HTML转换为画布图像。今天决定使其实现发送反馈,如你所述。

该脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于DOM,因此可能不是100%准确的实际表示,因为它不做一个实际的屏幕截图,但基于页面上可用的信息构建屏幕截图。

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

仍然相当有限的浏览器兼容性(不是因为更多的不能被支持,只是没有时间使它更多的跨浏览器支持)。

有关详细信息,请查看示例:

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

编辑
html2canvas脚本现在单独提供here和一些examples here

编辑2
另一个确认Google使用非常类似的方法(实际上,基于文档,唯一主要的区别是它们的异步方法的遍历/绘图)可以在Google反馈小组的Elliott Sprehn的演示文稿中找到:
http://www.elliottsprehn.com/preso/fluentconf/

猜你在找的HTML5相关文章