html5运用html2canvas实现阅读器截图--百分百源码网

html5运用html2canvas实现阅读器截图-

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了html5运用html2canvas实现阅读器截图的示例,非常拥有有用价值，需要的伴侣可以参照下这篇文章主要介绍了html5运用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 = $("").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 = $("").attr("href", url).attr("download", getNowFormatDate()+"异样信息.png").appendTo("body");
                        triggerDownload[0].click();
                        triggerDownload.remove();
                    }
                });
            });

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！

打赏