canvas图片合成

1、需要给产品左右一个分享的功能，需要把经纪人的信息和二维码和产品海报放在一起，写一个简单的demo，废话不多说直接上代码

 drawImage(){
      let _this = this;
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      canvas.width = 750;
      canvas.height = canvas.width*750/375;
      let img1 = new Image(), img2 = new Image();
      img1.src = '../../static/img/recruitment.png';
      img2.src = '../../static/img/xinyidaiercode.png'
      // 加载img
      let pm1 = new Promise((res, reject)=>{
        img1.onload = ()=>{
          res();
        }
      })
      let pm2 = new Promise((res, reject)=>{
        img2.onload = ()=>{
          res();
        }
      })
      // 两张图片加载完之后绘制于canvas中
      // 绘制图片的时候需要从本地加载完之后才能进行绘制，需要使用onload和promise对象，all方法为了等两张图片全都加载完之后再执行

      let drawALLImg = Promise.all([pm1, pm2]).then((res)=>{
        ctx.drawImage(img1, 0,0,canvas.width, canvas.height)
        ctx.drawImage(img2, canvas.width/3, 500,200, 200)
      })

      drawALLImg.then(()=>{
        ctx.font = 'bolder 36px Microsoft YaHei';
        let left = canvas.width*0;
        let top = canvas.height*0.02;
        ctx.fillText('xxxx', left, top);
        _this.imgUrl = canvas.toDataURL("image/png");
      })
    },

　遇到的一点小坑就是，合成图片的时候加上文字发现文字没有了，后面发现是被覆盖了，文字需要需要再图片之后加载；