| 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 |
問題分析
介紹完使用之后，說說自己使用中遇到的問題，截圖只能截取當前屏幕內的內容。在查看插件源碼，進行調試之后找到了解決方案。下面貼出源碼和修改后的代碼
源碼：
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功能越來越強大，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
標簽：營口 惠州 蘇州 咸陽 文山 甘南 萍鄉(xiāng) 紅河
巨人網絡通訊聲明：本文標題《html5使用html2canvas實現瀏覽器截圖的示例》，本文關鍵詞 html5,使用,html2canvas,實現,；如發(fā)現本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。