html5使用html2canvas实现浏览器截图的示例


Posted in HTML / CSS onAugust 31, 2017

最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下,上面的【截图报告管理员】就是使用html2canvas前端插件实现的。

html5使用html2canvas实现浏览器截图的示例

html2canvas介绍

以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:

  • 不支持iframe
  • 不支持跨域图片
  • 不能在浏览器插件中使用
  • 部分浏览器上不支持SVG图片
  • 不支持Flash
  • 不支持古代浏览器和IE,如果你想确认是否支持某个浏览器,可以用它访问 http://deerface.sinaapp.com/ 试试 :)

由于我的使用场景很简单,记录一下异常信息,并且异常页面也是由自己定义的,那么html2canvas 就足够使用了。

使用实例

引用jquery,html2canvas即可,使用代码也很简单。我这里使用的是 html2canvas 0.5.0 版本

html2canvas($("#tbl_exception"), {
         onrendered: function (canvas) {
             var url = canvas.toDataURL();
              //以下代码为下载此图片功能
             var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
               triggerDownload[0].click();
               triggerDownload.remove();
           }
   });

第一个参数是要截图的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

问题分析

介绍完使用之后,说说自己使用中遇到的问题,截图只能截取当前屏幕内的内容。在查看插件源码,进行调试之后找到了解决方案。下面贴出源码和修改后的代码

源码:

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

修改代码:

//2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持
    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

主要是让用户调用时能够自定义需要截取Dom对象的宽和高,现在调用方式如下

$("#btn_screen").on("click", function () {               
                html2canvas($("#tbl_exception"), {
                    height: $("#tbl_exception").outerHeight() + 20,
                    onrendered: function (canvas) {
                        var url = canvas.toDataURL();
                        //以下代码为下载此图片功能
                        var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
                        triggerDownload[0].click();
                        triggerDownload.remove();
                    }
                });
            });

总结

通过前端插件即实现了浏览器全屏截图功能,不得不说H5功能越来越强大,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
 

HTML / CSS 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 #HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 #HTML / CSS
You might like
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP curl使用实例
2015/07/02 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
JavaScript库 开发规则
2009/01/31 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python3并发写文件与Python对比
2019/11/20 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
机电一体化专业毕业生自荐信
2014/06/19 职场文书
小学总务工作总结
2015/08/13 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python