欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例

  發(fā)布時間：2017-08-31 14:39:09   作者：焰尾迭   我要評論
這篇文章主要介紹了html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例,非常具有實(shí)用價(jià)值，需要的朋友可以參考下

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

html2canvas介紹

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

  • 不支持iframe
  • 不支持跨域圖片
  • 不能在瀏覽器插件中使用
  • 部分瀏覽器上不支持SVG圖片
  • 不支持Flash
  • 不支持古代瀏覽器和IE，如果你想確認(rèn)是否支持某個瀏覽器，可以用它訪問 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();
           }
   });

第一個參數(shù)是要截圖的Dom對象，第二個參數(shù)時渲染完成后回調(diào)的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

問題分析

介紹完使用之后，說說自己使用中遇到的問題，截圖只能截取當(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();
                    }
                });
            });

總結(jié)

通過前端插件即實(shí)現(xiàn)了瀏覽器全屏截圖功能,不得不說H5功能越來越強(qiáng)大，以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
 

相關(guān)文章

  • HTML5中外部瀏覽器喚起微信分享功能的代碼

    這篇文章主要介紹了HTML5中外部瀏覽器喚起微信分享功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-15

  • html5的pushstate以及監(jiān)聽瀏覽器返回事件的實(shí)現(xiàn)

    這篇文章主要介紹了html5的pushstate以及監(jiān)聽瀏覽器返回事件的實(shí)現(xiàn)，主要介紹了pushstate的使用，以及監(jiān)聽瀏覽器的解決等問題，感興趣的可以一起來了解一下
    2020-08-11

  • HTML5中外部瀏覽器喚起微信分享

    這篇文章主要介紹了HTML5中外部瀏覽器喚起微信分享,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-04-20

  • 處理HTML5新標(biāo)簽的瀏覽器兼容版問題

    HTML5規(guī)范畢竟是剛剛才定義完成的規(guī)范，還有一些瀏覽器并不能支持其中的新標(biāo)簽和新屬性，尤其是IE8及以下版本瀏覽器。下面給大家介紹處理HTML5新標(biāo)簽的瀏覽器兼容版問題，
    2017-03-13

  • 如何查看瀏覽器對html5的支持情況

    這篇文章主要介紹了如何查看瀏覽器對html5的支持情況,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-12-15

最新評論