首页 / HTML5 / html5浏览器截图的示例
html5浏览器截图的示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5浏览器截图的示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2287字,纯文字阅读大概需要4分钟。
内容图文
![html5浏览器截图的示例](/upload/InfoBanner/zyjiaocheng/393/c64f5abcb3064152a15acc8d878fe820.jpg)
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下,上面的【截图报告管理员】就是使用html2canvas前端插件实现的。
html2canvas介绍
以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:
不支持iframe
不支持跨域图片
不能在浏览器插件中使用
部分浏览器上不支持SVG图片
不支持Flash
不支持古代浏览器和IE,如果你想确认是否支持某个浏览器,可以用它访问 http://deerface.sinaapp.com/ 试试 :)
由于我的使用场景很简单,记录一下异常信息,并且异常页面也是由自己定义的,那么html2canvas 就足够使用了。
使用实例
引用jquery,html2canvas即可,使用代码也很简单。我这里使用的是 html2canvas 0.5.0 版本
第一个参数是要截图的Dom对象,第二个参数时渲染完成后回调的canvas对象。
Name | Type | Default | Description |
---|---|---|---|
allowTaint | boolean | false | Whether to allow cross-origin images to taint the canvas |
background | string | #fff | Canvas background color, if none is specified in DOM. Set undefined for transparent |
height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window. |
letterRendering | boolean | false | Whether to render each letter seperately. Necessary ifletter-spacing is used. |
logging | boolean | false | Whether to log events in the console. |
proxy | string | undefined | Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. |
taintTest | boolean | true | Whether to test each image if it taints the canvas before drawing them |
timeout | number | 0 | Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout. |
width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window. |
useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy |
问题分析
介绍完使用之后,说说自己使用中遇到的问题,截图只能截取当前屏幕内的内容。在查看插件源码,进行调试之后找到了解决方案。下面贴出源码和修改后的代码
源码:
修改代码:
主要是让用户调用时能够自定义需要截取Dom对象的宽和高,现在调用方式如下
以上就是html5浏览器截图的示例的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的html5浏览器截图的示例全部内容,希望文章能够帮你解决html5浏览器截图的示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。