html5应用html2canvas完成访问器截图的示例

日期:2021-02-27 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

近期做新项目以便处理全局性出现异常信息内容纪录,科学研究了1下访问器全屏截图作用,便捷客户发现出现异常时可以迅速截图发给管理方法员。最后纪录的出现异常信息内容以下,上面的【截图汇报管理方法员】便是应用html2canvas前端开发软件完成的。

html2canvas详细介绍

之前大家只能根据别的的截图专用工具来截取图象。当代访问器的作用早已愈来愈强,伴随着H5的慢慢普及,访问器自身便可以截图啦。html2canvas便是这样1款前端开发软件,它的基本原理是将Dom连接点在Canvas里面画出来。尽管很便捷,但有下列限定:

  • 不适用iframe
  • 不适用跨域照片
  • 不可以在访问器软件中应用
  • 一部分访问器上不适用SVG照片
  • 不适用Flash
  • 不适用古代访问器和IE,假如你想确定是不是适用某个访问器,能够用它浏览 http://deerface.sinaapp.com/ 试试 :)

因为我的应用情景很简易,纪录1下出现异常信息内容,而且出现异常网页页面也是由自身界定的,那末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();
           }
   });

第1个主要参数是要截图的Dom目标,第2个主要参数时3D渲染进行后回调函数的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⑴8改动源代码,处理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作用愈来愈强劲,以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。