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