html2canvas截取视频,html2canvas下载图片
最近为了解决全局异常信息记录，我研究了浏览器的全屏截图功能，让用户在发现异常时可以快速截图并发送给管理员。最终记录的异常信息如下。上面的【截图报告管理员】就是用html2canvas前端插件实现的。
html2canvas介绍
以前我们只能通过其他截图工具抓取图像。现代浏览器的功能已经越来越强大。随着H5的逐渐普及，浏览器本身就可以截图了。Html2Canvas就是这样一个前端插件，其原理就是在画布中绘制Dom节点。虽然很方便，但它有以下限制：
不支持Iframe，不能在浏览器插件中使用跨域图像。有些浏览器不支持SVG图像，Flash和古代浏览器和IE。如果想确认某个浏览器是否支持，可以用它访问http://deerface.sinaapp.com/试试：)因为我的使用场景很简单，记录异常信息，异常页面自己定义，那么html2canvas就够了。
使用实例
只需引用jquery，html2canvas，代码非常简单。我这里用的是HTML2 canvas版本0.5.0。
html2canvas($(#tbl_exception )，{ on rendered:function(canvas){ var URL=canvas . toda taurl()；//下面的代码是下载这张图片var trigger download=$ (a )的函数。attr (href ，URL)。attr (download ，getnowformatdate() exception information . png )。追加到(“body”)；触发器下载[0]。单击()；triggerDownload.remove()。} });第一个参数是要截图的Dom对象，第二个参数是渲染完成后要回调的canvas对象。
名称类型默认描述allowTaint boolean false如果DOM中没有指定，是否允许跨原点图像污染画布背景字符串# fff画布背景颜色。设置未定义的透明高度值为空以像素为单位定义画布的高度。如果为空，则以窗口的全高呈现。letterRendering boolean false是否单独呈现每个字母。如果使用字母间距，这是必要的。是否在控制台中记录事件。代理字符串用于加载跨原点图像的代理的未定义Url。如果留空，则不会加载跨原点图像。taintTest boolean true如果图像污染了画布，是否在绘制之前测试每个图像加载图像的超时时间，以毫秒为单位。将其设置为0将不会导致超时。以像素为单位定义画布的宽度。如果为空，则以窗口的全宽呈现。useCORS布尔值false在恢复为代理之前，是否尝试加载CORS提供的跨原点图像
问题分析
介绍完使用后，说说自己使用中遇到的问题。截图只能捕捉当前屏幕中的内容。在检查了插件源代码和调试之后，找到了解决方案。把源代码和修改后的代码贴在下面。
源代码：
返回呈现文档(节点。所有者文档，选项，节点。所有者文档。默认视图。内部宽度，节点。所有者文档。默认视图。内部高度，索引).然后(function(canvas){ if(type of(options。onrendered)= function ){ log( options。onrendered已弃用，html2canvas返回包含画布的承诺);选项。onrendered(画布)；}返回画布；});修改代码：
//2016-02-18修改源码，解决病菌对于部分不能截屏不能全屏添加自定义宽高的参数以支持var width=options.width！=null？选项。宽度：节点。所有者文档。默认视图。内部宽度；var height=options.height！=null？选项。高度：节点。所有者文档。默认视图。内部高度；返回呈现文档(节点。所有者文档，选项，宽度，高度，索引).然后(function(canvas){ if(type of(options。onrendered)= function ){ log( options。onrendered已弃用，html2canvas返回包含画布的承诺);选项。onrendered(画布)；}返回画布；});主要是让用户调用时能够自定义需要截取师对象的宽和高，现在调用方式如下
$(#btn_screen ).on(click ，function(){ html 2 can vas($( # TBL _异常)，{ height:$( # TBL _异常)).outerHeight() 20，on rendered:function(canvas){ var URL=canvas。toda taurl()；//以下代码为下载此图片功能var triggerDownload=$(a ).attr(href ，url).attr(download ，getNowFormatDate()异常信息. png’).appendTo( body )；触发器下载[0]。单击();triggerDownload.remove()。} });});总结
通过前端插件即实现了浏览器全屏截图功能，不得不说H5功能越来越强大，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。