关闭

Canvas合成图像

3315人阅读 评论(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网站的观点或立场

利用canvas,把多张图合并成一张图片

Html5 Canvas 实现图片合成 | img{ border:solid 1px #ddd;}     function hech...
  • u013239233
  • u013239233
  • 2017-04-17 14:47
  • 4973

使用h5的canvas实现两张图片的合并

思路: 1.首先等待图片加载完成 2.然后使用canvas完成图片的合并 3.显示合成图片 步骤: 1.根据第一个思路,需要image的load和error事件,大致流程: var l_i...
  • babulongbo
  • babulongbo
  • 2017-12-18 18:22
  • 227

Canvas画布图片文字拼接合成,生成图片

  • 2016-11-19 17:29
  • 192KB
  • 下载

canvas合成图片的各种坑

做南航三八妇女节推广活动时,用到了canvas合成图片和文字,有些坑
  • w20101310
  • w20101310
  • 2017-03-06 15:47
  • 1191

JS | canvas 合成图模糊

“模糊是多么 多么寂寞;模糊是多么 多么空虚;独自在清晰中,对比不断地扫过;我的寂寞,谁能明白我;模糊是多么 多么寂寞;模糊是多么 多么空虚;web开发的你,可不可听我诉说;我的寂寞,无尽的寂寞……”...
  • anmoran
  • anmoran
  • 2017-01-11 14:47
  • 1204

HTML5 canvas绘图基本使用方法

本文介绍了html5 中canvas标签的基本使用方法,详细讲解了其重要的属性和方法
  • u014607184
  • u014607184
  • 2016-06-26 15:20
  • 33054

HTML5 Canvas基础教程源代码

  • 2012-04-30 10:37
  • 28.48MB
  • 下载

canvas图片合成

#box{ margin: auto; position: relative; } .box>div:nth-of-type(1){ posit...
  • dh798618067
  • dh798618067
  • 2017-03-28 13:22
  • 587

一个canvas demo, 用到了三个canvas标签

插入图片      #wrap{        border:2px dashed red;        background-color:green;   ...
  • u012028371
  • u012028371
  • 2016-08-12 14:15
  • 558

canvas demo之 画一个星星

想要使用canvas画一个五角星,关键即是找出十个顶点的坐标,我们当然可以用十句 context.lineTo来实现,但是这样没有任何意义,因为没办复用,而且代码冗余。实际上由一个位置坐标,以及一大一...
  • qq_20417227
  • qq_20417227
  • 2016-07-26 11:59
  • 1267
    个人资料
    • 访问:104385次
    • 积分:1606
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:20条
    文章分类
    最新评论