js实现整页截图菜鸟教程下载_截图基础知识教程

一、引用库html2canvas.js和canvas2image.js的下载地址:html2canvas.js: http://html2canvas.hertzen.com/dist/html2canvas.min.jscanvas2image.js: https://github.com/SuperAL/canvas2image/blob/mast

js实现整页截图菜鸟教程下载

一、引用库

js实现整页截图菜鸟教程下载_截图基础知识教程

html2canvas.js和canvas2image.js的下载地址:

二、使用

需要已引入jQ库。如果浏览器没有引入,可以自行引入

同步写法

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');
    });
}

异步写法

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

海计划公众号
(0)
上一篇 2020/03/23 18:36
下一篇 2020/03/23 18:36

您可能感兴趣的内容