canvas 合成图片

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 合成图片相关的知识，希望对你有一定的参考价值。

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="‘+base64[0]+‘">‘;  
                    }  
                }  
                draw(0)  
        }  
    </script>  
</html>

 

以上是关于canvas 合成图片的主要内容，如果未能解决你的问题，请参考以下文章

html2canvas-html图片合成-canvas生成图片

canvas合成图片 圣诞节新技能戴帽

js使用canvas合成图片后生成base64一直报错,有大神指导下是哪里出问题吗?

canvas跨域完美解决，微信头像解决跨域

js多张图片合成一张图，canvas(海报图，将二维码和背景图合并) -----vue

离线合成联想到的--canvas合成水印