使用html2canvas实现浏览器截图

  最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下,上面的【截图报告管理员】就是使用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功能越来越强大,下面将介绍mvc中的全局异常记录实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例

当前端界面需要从服务器获取数据的时候,其实就是眼访问一个 URL 地址,指定特定的参数即可。这个 URL 对应的是 php 或者 jsp 等都是服务器开发人员已...

993
来自专栏君赏技术博客

百思不得姐数据挖掘第三篇

播放视频的界面现在只剩下视频的功能了,对于这种播放视频的应该属于功能块。我们可以单独把这个功能提取出来。

712
来自专栏ASP.NET MVC5 后台权限管理系统

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码

我们上一节建了数据库的表,但我发现很多东西还未完善起来,比如验证码,我们先做好验证码吧,验证码我们再熟悉不过了,为了防止恶意的登录,我们必须在登录页面加入验证码...

1835
来自专栏每日一篇技术文章

weex-06-程序的入口文件app.js

app.js 这个是我们打包时的入口文件,为什么这样说呢?我们看一下打包配置文件webpack.config.json中的部分内容

762
来自专栏我的博客

导出excel

/** * 导出数据为excel表格 *@param $data 一个二维数组,结构如同从数据库查出来的数组 *@param...

3005
来自专栏不想当开发的产品不是好测试

常用业务接口界面化 in python flask

背景: 对于业务测试来说,有一些基础业务接口是需要经常调用的,如根据userId查询某人的信息,修改某人的xx属性,一般的接口都有验签(或者说token)机制,...

19410
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

2367
来自专栏V站

php7高效生成二维码:composer和荷兰PHP开发者的QrCode

关于QrCode这个类库没必要详细介绍,基于php的GD库,用于生成任意尺寸的二维码,并且可以将logo水印也打上去,还可以在二维码图片下方加入文字。QrCod...

2094
来自专栏Ryan Miao

idea快捷键总结

使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键。参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会...

27012
来自专栏青枫的专栏

Ecplise的使用练习

----------------------------------------------------------------------------- Ec...

511

扫码关注云+社区