最近做項目為了解決全局異常信息記錄，研究了一下瀏覽器全屏截圖功能，方便用戶發現異常時能夠快速截圖發給管理員。最終記錄的異常信息如下，上面的【截圖報告管理員】就是使用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對象。

問題分析

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

源碼：

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

以上就是html5瀏覽器截圖的示例的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。