html5瀏覽器截圖的示例

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

html2canvas介紹

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

• 不支持iframe

• 不支持跨域圖片

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

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

• 不支持Flash

• 不支持古代瀏覽器和IE，如果你想確認(rèn)是否支持某個(gè)瀏覽器，可以用它訪問 http://deerface.sinaapp.com/ 試試 :)

由于我的使用場景很簡單,記錄一下異常信息，并且異常頁面也是由自己定義的，那么html2canvas 就足夠使用了。

使用實(shí)例

引用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();
           }
   });

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

問題分析

介紹完使用之后，說說自己使用中遇到的問題，截圖只能截取當(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 對(duì)于部分不能截屏不能全屏添加自定義寬高的參數(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)用時(shí)能夠自定義需要截取Dom對(duì)象的寬和高，現(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();
                    }
                });
            });

以上就是html5瀏覽器截圖的示例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！