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.loadImage(url),
      this.loadImage(this.codeUrl),
    ])
    ctx.drawImage(bgImg,0,0,491,848);
    ctx.drawImage(qrcodeImg,370,700,90,90);
    return myCanvas.toDataURL();
  }

  loadImage(src:string) {
    return new Promise(resolve => {
      let image = new Image();
      image.src = src;
      image.onload = () => {
        resolve(image);
      };
    })
  }

本地下载海报

 downloadImage(url:string){
    let oA = document.createElement("a");
    oA.download = "邀请海报"; // 设置下载的文件名，默认是'下载'
    oA.href = url;
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
  }