html5使用canvas實現(xiàn)瀏覽器截圖的案例

html5使用canvas實現(xiàn)瀏覽器截圖的案例？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

最近做項目為了解決全局異常信息記錄，研究了一下瀏覽器全屏截圖功能，方便用戶發(fā)現(xiàn)異常時能夠快速截圖發(fā)給管理員。最終記錄的異常信息如下，上面的【截圖報告管理員】就是使用html2canvas前端插件實現(xiàn)的。

html2canvas介紹

以前我們只能通過其他的截圖工具來截取圖像。現(xiàn)代瀏覽器的功能已經(jīng)越來越強(qiáng)，隨著H5的逐漸普及，瀏覽器本身就可以截圖啦。html2canvas就是這樣一款前端插件,它的原理是將Dom節(jié)點在Canvas里邊畫出來。雖然很方便，但有以下限制：

• 不支持iframe

• 不支持跨域圖片

• 不能在瀏覽器插件中使用

• 部分瀏覽器上不支持SVG圖片

• 不支持Flash

• 不支持古代瀏覽器和IE，如果你想確認(rèn)是否支持某個瀏覽器，可以用它訪問 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();
           }
   });

第一個參數(shù)是要截圖的Dom對象，第二個參數(shù)時渲染完成后回調(diào)的canvas對象。

問題分析

介紹完使用之后，說說自己使用中遇到的問題，截圖只能截取當(dāng)前屏幕內(nèi)的內(nèi)容。在查看插件源碼，進(jìn)行調(diào)試之后找到了解決方案。下面貼出源碼和修改后的代碼

源碼：

 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 對于部分不能截屏不能全屏添加自定義寬高的參數(shù)以支持
    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;
    });

主要是讓用戶調(diào)用時能夠自定義需要截取Dom對象的寬和高，現(xiàn)在調(diào)用方式如下

            $("#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();
                    }
                });
            });

感謝各位的閱讀！看完上述內(nèi)容，你們對html5使用canvas實現(xiàn)瀏覽器截圖的案例大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。