原文链接
多个图片合成一张
<!doctype html><html><head><meta charset="utf-8"><title>Html5 Canvas 实现图片合成</title><script src="js/jquery-1.8.0.js" type="text/javascript" charset="utf-8"></script><script src="js/Canvas2Image.js" type="text/javascript" charset="utf-8"></script><style>img{border:solid 1px #ddd;}</style></head><body><div align="center" class="img_photo"><img src="img_clothes/img1.png" width="300"><img src="img_clothes/img2.png" width="300"><img src="img_clothes/img3.png" width="300"><img src="img_clothes/img4.png" width="300"></div><input type="button" value="一键合成" onClick="draw()" style="display:block;width: 60px; margin: 0 auto;"><div id="imgBox" align="center"></div><script>function draw(fn){var data1= new Array();for(var i=0;i<$('.img_photo img').length;i++){data1[i]=$('.img_photo img').eq(i).attr('src');}var c=document.createElement('canvas'),ctx=c.getContext('2d'),len=data1.length;c.width=290;c.height=290;ctx.rect(0,0,c.width,c.height);ctx.fillStyle='transparent';//画布填充颜色ctx.fill();function drawing(n){if(n<len){var img=new Image;//img.crossOrigin = 'Anonymous'; //解决跨域img.src=data1[n];img.onload=function(){ctx.drawImage(img,0,0,290,290);drawing(n+1);//递归}}else{//保存生成作品图片convertCanvasToImage(c);Canvas2Image.saveAsJPEG(c); //保存到电脑}}drawing(0);}function convertCanvasToImage(canvas) {var hc_image = new Image();hc_image.src = canvas.toDataURL("image/png");$('#imgBox').html(hc_image);}</script></body></html>
