canvas 将小图片自动拼成一张大图片

<div id="imgBox">

</div>

function hecheng(){

var data=['img1.png','img2.png','img3.png','img4.png'],base64=[]; //页面要放在本地服务器或外网服务器上。不然图片有跨域问题

var c=document.createElement('canvas'),

ctx=c.getContext('2d'),

len=data.length;

c.width=290;

c.height=290;

ctx.rect(0,0,c.width,c.height);

ctx.fillStyle='#fff';

ctx.fill();

function drawing(n){

if(n

var img=new Image;

//img.crossOrigin = 'Anonymous'; //解决跨域

img.src=data[n];

img.onload=function(){

if(n==2){

ctx.drawImage(img,0,0,290,290);

}else{

ctx.drawImage(img,0,0,290,290);

}

drawing(n+1);//递归

}

}else{

//保存生成作品图片

base64.push(c.toDataURL("image/jpeg",0.8));

//alert(JSON.stringify(base64));

//fn();

[图片上传失败...(image-a10c03-1545289026339)]

}

}

drawing(0);

}

hecheng()