js實現整頁截圖

一、引用庫

html2canvas.js和canvas2image.js的下載地址：

html2canvas.js:   http://html2canvas.hertzen.com/dist/html2canvas.min.js
canvas2image.js:  https://github.com/SuperAL/canvas2image/blob/master/canvas2image.js

 

 

二、使用

需要已引入jQ庫。如果瀏覽器沒有引入，可以自行引入

http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

同步寫法

function save_html_as_png(filename = 'image') { var opts = { //scale: scale, // 添加的scale 參數 //canvas: canvas, //自定義 canvas //logging: false, //日志開關，便於查看html2canvas的內部執行流程 //width: width, //dom 原始寬度 //height: height, useCORS: true // 【重要】開啟跨域配置 }; html2canvas($('body')[0], opts).then(canvas => { //document.body.appendChild(canvas); // canvas寬度 var canvasWidth = canvas.width; // canvas高度 var canvasHeight = canvas.height; console.log(canvasHeight, canvasWidth); //sleep(2); // 調用Canvas2Image插件 var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); // 調用Canvas2Image插件 Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename); console.log('ok'); }); }

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

異步寫法

async function async_save_html_as_png(filename="image") { var opts = { //scale: scale, // 添加的scale 參數 //canvas: canvas, //自定義 canvas //logging: false, //日志開關，便於查看html2canvas的內部執行流程 //width: width, //dom 原始寬度 //height: height, useCORS: true // 【重要】開啟跨域配置 }; var canvas = await html2canvas($('body')[0], opts); // canvas寬度 var canvasWidth = canvas.width; // canvas高度 var canvasHeight = canvas.height; console.log(canvasHeight, canvasWidth); //sleep(2); // 調用Canvas2Image插件 var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); // 調用Canvas2Image插件 Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename); console.log('ok'); }

直接調用我包裝好的程序即可。

 

要點說明：

1、html2canvas  傳入的是 dom對象。這是一個異步函數。可以截圖指定元素區域。

2、html2canvas 的 useCORS 默認是False（跨域）。如果不跨域，則截圖中無法加載跨域圖片。

3、Canvas2Image.convertToImage 是同步函數。可以指定圖片區域大小。類型可以是jpeg/png/bmp等（不區分大小寫）。文件名不需要后綴。Canvas2Image.convertToImage 只會下載圖片文件。無法存放到指定路徑。