前言

主要是闲着没事干，突然想到，所以写一个这样的小功能用一用

思路分析

加载所有的图片
保存图片的数据
将图片按照数据写入到canvas画布中
把canvas画布导出成图片

逻辑过程

1，加载所有的图片，从所有的图片当中找到宽度最大的值保存起来，然后把所有的图片的高度累加起来，这个就是canvas的宽和高。

2，每加载一个图片就保存一组数据，这组数据是图片对象本身和图片在canvas的位置，这个位置主要是指高度，例如：第二章图片是放在第一张图片的下边，所以第二张图片的位置是第一张图片的高度。图片对象和数据放在一个json对象中，一个json对象对应一个img本身和它的数据。多个json对象都统一保存在一个数组中，我们就循环这个数组，并且把图片按照数据的值画入到canvas中。

3，把canvas导出成一张图片，并且写入到dom中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas合图</title>
</head>
<body>

    <img id="img1" src="" alt="">

</body>
</html>
<script>



//网络图片地址
let _data=["./1.jpg",
"./1.jpg",
"./1.jpg",
"./1.jpg",
"./1.jpg"];

let canvas=document.createElement("canvas");
let ctx=canvas.getContext("2d");

//canvas的高度是累计的
let sumHeight=0;
//canvas的宽度取一个最大的
let maxWidth=0;
//所有的promise都放入到这个数组里边
let promiseArr=[];


//图片的加载是异步的，获取图片的相关信息
function imgsChangeCanvas(_url){

    let _img=new Image();
    _img.src=_url;

    return new Promise(function(resovle,reject){

        _img.onload=function(){

            maxWidth=_img.width>maxWidth?_img.width:maxWidth;
            let top=sumHeight;
            sumHeight+=_img.height;
         
            resovle({
                status:1,
                img:_img,
                h:top
            });


        }

        _img.onerror=function(){

            reject({
                status:0
            });

        }


    });

}

//循环所有的图片，并把图片进行相关的操作
for(let i=0;i<_data.length;i++){
    promiseArr.push(imgsChangeCanvas(_data[i]));
}

//我们同意处理所有的promise
Promise.all(promiseArr).then(res=>{

    console.log("所有的图片加载成功，并且写入到canvas里边",res);
    console.log("maxWidth:::>>>",maxWidth);
    console.log("sumHeight:::>>>",sumHeight);


    canvas.width=maxWidth+100;
    canvas.height=sumHeight+100;
    res.forEach(item=>{
        
       ctx.drawImage(item.img,0,item.h);

    })
    
    //把canvas转成一张图片
    let newImage=new Image();
    //把canvas转成一张图片
    let _imgUrl=canvas.toDataURL("image/jpeg");//生成一个database64的url
    console.log("_imgUrl",_imgUrl);
    document.getElementById("img1").src=_imgUrl;


}).catch(err=>{

    console.log("所有图片没有全部加载成功...",err);

});

 
 
</script>

canvas将多张图合成一张图片

前言

思路分析

逻辑过程