html多张图片合成,js+canvas多张图片合成一张图片代码

js代码

function hecheng(){

draw(function(){

document.getElementById('imgBox').innerHTML='

合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！

';

})

}

var data=['img1.png','img2.png','img3.png','img4.png'],base64=[];

function draw(fn){

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.οnlοad=function(){

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

drawing(n+1);//递归

}

}else{

//保存生成作品图片

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

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

fn();

}

}

drawing(0);

}