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