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

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為晉中企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、做網(wǎng)站，晉中網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

最近做項(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對象，第二個(gè)參數(shù)時(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)用時(shí)能夠自定義需要截取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實(shí)現(xiàn)瀏覽器截圖的案例大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

分享標(biāo)題：html5使用canvas實(shí)現(xiàn)瀏覽器截圖的案例-創(chuàng)新互聯(lián)
文章分享：http://www.chinadenli.net/article26/dcchjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站策劃、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)