html 使用canvas拼接图片

从今天开始记录一下平时日常中踩过的坑和一些通用的方法，以便以后自我查补，也给需要者提供一点帮助。
项目需要将随机生成的二维码放入一张背景图中并且将两张图拼成一张。我是通过canvas画图工具将两张图画在一起，再保存为图片，具体实现代码如下：

• 页面

            <div id="canbox">             
                <canvas id="myCanvas" width="" height=""></canvas>
            </div>
            <div style="width: 100%; text-align: center; vertical-align: middle;">
                <img class="pic" src="" />
            </div>

myCanvas 为canvas画板，用于绘制
pic 为保存后图片，用于显示

• 方法

           var wait = 0;
           var base64 = result.url_base64;//base64格式二维码图片
           var nickname = result.nickname;//显示在图片上的文字
           
           //画海报 绘制一张空白的canvas画板
           var c = document.getElementById("myCanvas");
           c.width = 320;
           c.height = 568;
           var ctx = c.getContext("2d");
           
           //背景
           var img = new Image();
           img.src = "css/player_back.jpg";
           
           //二维码
           var codeimg = new Image();
           codeimg.src = "data:image/png;base64," + base64;

           //文字
           ctx.font = "13px Arial";
           ctx.fillStyle = "white";
           var nickname = "微信:  " + nickname;
           
           img.onload = function() { //必须等待图片加载完成
           wait += 1;
           if(wait == 2){
               //绘制图像
           ctx.drawImage(img, 0, 0, 320, 568);//背景
           ctx.drawImage(codeimg, 25, 428, 120, 120);//二维码
           ctx.fillText(nickname, 160, 525);//文字
           ctx.fillText("长按图片识别二维码", 160, 545);

           //绘制完成,转为图片
           var bigcan = $('canvas')[0];
           images = new Image();
           images.src = bigcan.toDataURL("image/png");
           $('.pic').attr('src', bigcan.toDataURL("image/png"));

           document.getElementById("canbox").style.display="none";//隐藏画板
              return;
          }
           }
          codeimg .onload = function() { //必须等待图片加载完成
             wait += 1;
           if(wait == 2){
               //绘制图像
           ctx.drawImage(img, 0, 0, 320, 568);//背景
           ctx.drawImage(codeimg, 25, 428, 120, 120);//二维码
           ctx.fillText(nickname, 160, 525);//文字
           ctx.fillText("长按图片识别二维码", 160, 545);

           //绘制完成,转为图片
           var bigcan = $('canvas')[0];
           images = new Image();
           images.src = bigcan.toDataURL("image/png");
           $('.pic').attr('src', bigcan.toDataURL("image/png"));

           document.getElementById("canbox").style.display="none";//隐藏画板
             return;
          }
           }

宽高都为固定参数，具体可以调整。
最后绘图写了两次是由于图片加载是多线程，无法确保绘图时两张图片顺序加载完成，所以需要在保证两张图片都加载完成了再绘图（参数wait == 2）