Html5 Canvas 实现图片合成


多个图片合成一张
<!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>

 

 

posted @ 2016-03-21 16:44  看我的~  阅读(20988)  评论(4)  编辑  收藏  举报