最近做項目為了解決全局異常信息記錄，研究了一下瀏覽器全屏截圖功能，方便用戶發現異常時能夠快速截圖發給管理員。最終記錄的異常信息如下，上面的【截圖報告管理員】就是使用html2canvas前端插件實現的。
html2canvas介紹以前我們只能通過其他的截圖工具來截取圖像。現代瀏覽器的功能已經越來越強，隨著H5的逐漸普及，瀏覽器本身就可以截圖啦。 html2canvas就是這樣一款前端插件,它的原理是將Dom節點在Canvas裡邊畫出來。雖然很方便，但有以下限制：
由於我的使用場景很簡單,記錄一下異常信息，並且異常頁面也是由自己定義的，那麼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對象。
| 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-spacingis 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 |
介紹完使用之後，說說自己使用中遇到的問題，截圖只能截取當前屏幕內的內容。在查看插件源碼，進行調試之後找到了解決方案。下面貼出源碼和修改後的代碼
源碼：
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(); } }); });總結通過前端插件即實現了瀏覽器全屏截圖功能,不得不說H5功能越來越強大，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。