Canvas合成图像

最新推荐文章于 2024-07-15 16:32:01 发布

寓言s

最新推荐文章于 2024-07-15 16:32:01 发布

阅读量4.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011551941/article/details/46819215

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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="1.jpg" alt="" />
            <img src="2.png" alt="" />
        </div>
        <button οnclick="date()">生成</button>
        <div id="imgBox" style="width:1000px;height:800px;">
        </div>
    </body>
    <script>
        var data=["1.jpg","2.png"],base64=[];
        function date(){
            var Mycanvas=document.createElement("canvas"),
                ct=Mycanvas.getContext("2d"),
                len=data.length;
                Mycanvas.width=640;
                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.οnlοad=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>

demo： http://sandbox.runjs.cn/show/kozthrpo