Example of html5 browser screenshot

This article mainly introduces the example of HTML5 using html2canvas to implement browser screenshots. It is of great practical value. Friends who need it can refer to it.

In order to solve the global exception information record in a recent project, I studied browsing The full-screen screenshot function of the device allows users to quickly take screenshots and send them to the administrator when they find an abnormality. The final recorded exception information is as follows. The above [Screenshot Report to Administrator] is implemented using the html2canvas front-end plug-in.

html2canvas introduction

In the past, we could only capture images through other screenshot tools. The functions of modern browsers have become more and more powerful. With the gradual popularization of H5, the browser itself can take screenshots. html2canvas is such a front-end plug-in. Its principle is to draw Dom nodes in Canvas. Although it is very convenient, it has the following limitations:

• iframe is not supported

• cross-domain images are not supported

• Cannot be used in browser plug-ins

• SVG images are not supported on some browsers

• Flash is not supported

• Does not support ancient browsers and IE. If you want to confirm whether a certain browser is supported, you can use it to visit http://deerface.sinaapp.com/ and try:)

Since my usage scenario is very simple, record the exception information, and the exception page is also defined by myself, then html2canvas is enough to use.

Usage examples

Just reference jquery and html2canvas, and the code is also very simple. What I am using here is html2canvas version 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();
           }
   });

The first parameter is the Dom object to be screenshot, and the second parameter is the canvas object that is called back after rendering is completed.

Problem Analysis

After introducing the use, talk about the problems you encountered during use. Screenshots can only capture the content of the current screen. After checking the plug-in source code and debugging, I found the solution. The source code and modified code are posted below

Source code:

 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;
    });

Modified code:

   //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;
    });

Mainly allows users to customize the width and height of the Dom object that needs to be intercepted when calling. The current calling method is as follows

            $("#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 above is the detailed content of Example of html5 browser screenshot. For more information, please follow other related articles on the PHP Chinese website!