canvas合成图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            html,body{
                width: 100%;
            }
        </style>
    </head>
    <body>
        
        <button onclick="hec()"> 合成图片</button>
        <script>
            function hec(){
                dataurl=ca.toDataURL("image/png");
                console.log(dataurl)
                var bigImg = document.createElement("img");
                bigImg.src=dataurl;
                bigImg.style.width=10+"%";
                bigImg.style.height=20+"%";
                document.body.appendChild(bigImg);
                //document.getElementById("你的div").appendChild(bigImg);
                //$("你的div").html(bigImg);
            }
            var dataurl;
            var img1;
            var img2;
            //var ca=document.getElementById('mycanvas');
            var ca=document.createElement("canvas");
            var ctx=ca.getContext('2d');    
            
        
                
            
            function init(){
                img1=new Image;
                img2=new Image;
                img1.setAttribute("crossorigin","Aninomous");
                img2.setAttribute("crossorigin","Anonymous");
                img1.src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0"
                img2.src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png"
                    
                
            //var img1=document.getElementById('img1');
            //var img2=document.getElementById('img2');
                ca.width=300;
                ca.height=300;
                img1.onload=function(){
                ctx.drawImage(img1,0,0,300,300);
                ctx.drawImage(img2,0,0,300,300);
                
                
                }
            
            
            }
            init();
            
            
            
        </script>
    </body>
</html>
猜你喜欢
