canvas 合成图片

 

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <style>  
            *{  
                margin:0;  
                padding:0;  
            }  
            .center{  
                text-align: center;  
            }  
  
        </style>  
    </head>  
    <body>  
        <div class="center">  
            <img src="01.jpg" alt="" />  
            <img src="02.png" alt="" />  
        </div>  
        <button onclick="date()">生成</button>  
        <div id="imgBox" style="width:1000px;height:800px;">  
        </div>  
    </body>  
    <script>  
        var data=["1.jpg","2.png"],base64=[]; 
        function date(){  
            //获得模板的宽高
            var mbWidth=$('#pic_tem').height();
            var mbHeight=$('#pic_tem').width();
            var Mycanvas=document.createElement("canvas"),  
                ct=Mycanvas.getContext("2d"),  
                len=data.length;  
                Mycanvas.width=680;     //应为模板的宽 
                Mycanvas.height=386;    //应为模板的高
                ct.rect(0,0,Mycanvas.width,Mycanvas.height);      
                ct.fillStyle='#fff';  
                ct.fill();  
                function draw(n){  
                    if(n<len){  
                        var img=new Image;  
                        img.crossOrigin = 'Anonymous'; //解决跨域  
                        img.src=data[n];  
                        console.log(data[n]);  
                        img.onload=function(){  
                            ct.drawImage(this,0,0,640,386);
                            draw(n+1);  
                        }  
                    }else{  
                        base64.push(Mycanvas.toDataURL("image/png"));  
                        document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">';  
                    }  
                }  
                draw(0)  
        }  
    </script>  
</html>  

 

posted @ 2017-04-13 12:15  原来是灿烂啊  阅读(1811)  评论(0编辑  收藏  举报