首页 > 代码库 > canvas 合成图片

canvas 合成图片

2024-09-14 13:28:45   207人阅读

copy网上的代码

<!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="http://www.mamicode.com/‘+base64[0]+‘">‘;  
                    }  
                }  
                draw(0)  
        }  
    </script>  
</html>

 

canvas 合成图片


联系
我们