使用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 条评论
登录 后参与评论

相关文章

来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

35011
来自专栏技术博文

excel导入与导出

基本上导出的文件分为两种: 1:类Excel格式,这个其实不是传统意义上的Excel文件,只是因为Excel的兼容能力强,能够正确打开而已。修改这种文件后再保存...

2516
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(7)---自定义打印的外观

表单打印的多个部分都可以进行自定义,大多数的自定义选项存在于PrintInfo对象中。大多数打印选项是在PrintInfo对象上进行设置,并在表单级别上应用。当...

3037
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

    myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

20810
来自专栏DannyHoo的专栏

问题——持续更新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

702
来自专栏小怪聊职场

爬虫课堂(二十一)|使用FilesPipeline和ImagesPipeline下载文件和图片

2566
来自专栏james大数据架构

在ASPNET中使用JS集锦

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')")...

1857
来自专栏Porschev[钟慰]的专栏

Asp.Net无刷新上传并裁剪头像

开发网站几乎都做过上传图片并截图,做个无刷新Asp.Net上传并截图示例 实现功能: 1.选择文件,自动上传并生成缩放图(上传带进度条),形成预览图 2.在预览...

2637
来自专栏强仔仔

利用js实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

2286
来自专栏谦谦君子修罗刀

React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止...

56910

扫码关注云+社区