canvas绘制邀请海报并实现本地下载

html

海报图片

<img class="w100p h100p" @click='downloadImage()' src="图片地址">

将动态生成的二维码定位在图片上

<div class="w45 h45 whiteBg abs right bottom" id="qrcode" style="right:17px; bottom:95px">
    <img class="w100p h100p" [src]="codeUrl">
</div>

canvas将带有二维码的图片绘制在一起

 <canvas id="mycanvas" width="491px" height="848px" ></canvas>

js部分：

动态生成二维码

 async createCode(){
    this.codeUrl = await QRCode.toDataURL(this.codeUrl)
  }

将二维码与海报绘制在一张图上

  async getPoster(url:string){
    let myCanvas:any = document.getElementById('mycanvas');
    let ctx = myCanvas.getContext('2d');
    let [bgImg,qrcodeImg] = await Promise.all([
      this.loadI