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 只会下载图片文件。无法存放到指定路径。