html5 canvas实现多张图片合成一张代码

html5 canvas实现多张图片合成一张代码，一款简单又实用的html5多张元素图片合成一张图片的效果。

分类：图片代码 > canvas 难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script>
function hecheng(){
	draw(function(){
		document.getElementById('imgBox').innerHTML='<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="'+base64[0]+'">';
	})	
}

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<len){
			var img=new Image;
			//img.crossOrigin = 'Anonymous'; //解决跨域
			img.src=data[n];
			img.onload=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);
}
</script>