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

使用实例

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

1
2
3
4
5
6
7
8
9
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

 

问题分析

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

源码:

1
2
3
4
5
6
7
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;
   });

修改代码:

1
2
3
4
5
6
7
8
9
10
//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对象的宽和高,现在调用方式如下

1
2
3
4
5
6
7
8
9
10
11
12
$("#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();
        }
    });
});
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容