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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python实现类的创建与使用方法示例
2017/07/25 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python定义函数实现累计求和操作
2020/05/03 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
远程调用的原理
2014/07/05 面试题
2014年乡镇植树节活动方案
2014/02/28 职场文书
预防传染病方案
2014/06/14 职场文书
学习保证书
2015/01/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL