首頁 > web前端 > H5教程 > 主體

html5使用html2canvas實作瀏覽器截圖

不言
發布: 2018-07-03 10:36:38
原創
3383 人瀏覽過

這篇文章主要介紹了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 = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
               triggerDownload[0].click();
               triggerDownload.remove();
           }
   });
登入後複製

第一個參數是要截圖的Dom對象,第二個參數時渲染完成後回呼的canvas對象。

##booleanfalseWhether to log events in the console.proxy#stringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
NameTypeDefaultDescription
allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas
#background string#fffCanvas background color, if none is specified in DOM. Set undefined for transparent
heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.
#letterRenderingbooleanfalseWhether to render each letter seperately. Necessary ifletter-spacing is used.

#taintTest

boolean

true

Whether to test each image if it taints the canvas before drawing them

timeout
number

0Timeout 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 = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
                        triggerDownload[0].click();
                        triggerDownload.remove();
                    }
                });
            });
登入後複製
#########以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! ######相關推薦:#########html 基於canvas 實作截圖的介紹###############HTML5實作留言和回應的頁面樣式## ###################

以上是html5使用html2canvas實作瀏覽器截圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!