关闭

Canvas合成图像 比较简单 看代码和demo

2463人阅读 评论(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 onclick="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.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>
demohttp://sandbox.runjs.cn/show/kozthrpo
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:79574次
    • 积分:1391
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:19条
    文章分类
    最新评论