html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例
發(fā)布時(shí)間：2017-08-31 14:39:09 作者：焰尾迭 
我要評論
我要評論這篇文章主要介紹了html5使用html2canvas實(shí)現(xiàn)瀏覽器截圖的示例,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
最近做項(xiàng)目為了解決全局異常信息記錄，研究了一下瀏覽器全屏截圖功能，方便用戶發(fā)現(xiàn)異常時(shí)能夠快速截圖發(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)是否支持某個(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();
}
});
});
總結(jié)
通過前端插件即實(shí)現(xiàn)了瀏覽器全屏截圖功能,不得不說H5功能越來越強(qiáng)大，以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了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中外部瀏覽器喚起微信分享,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-20
- HTML5規(guī)范畢竟是剛剛才定義完成的規(guī)范，還有一些瀏覽器并不能支持其中的新標(biāo)簽和新屬性，尤其是IE8及以下版本瀏覽器。下面給大家介紹處理HTML5新標(biāo)簽的瀏覽器兼容版問題，2017-03-13
這篇文章主要介紹了如何查看瀏覽器對html5的支持情況,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-15
