canvas绘制图片二维码下载

//因为是弹窗 所以放到监听watch中

drawImg(){
  let time = new Date().getTime()
  var canvas=document.createElement("canvas");
  //图片大小
  canvas.width = 500;
  canvas.height = 730;
  var ctx=canvas.getContext("2d")!;
  var img= new Image();
  var img3 = new Image();//二维码中的logo
  img.src = bgImg;
  img3.src = logoImg;
  //图层
  img.onload = ()=>{
    ctx.drawImage(img,10,10);
    ctx.fillStyle="#ffffff";
    ctx.fillRect(114,240,276,276);
    //二维码
    let img2 = new Image();
        
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a18567c35ebb431ba877532ab744127d~tplv-k3u1fbpfcp-watermark.image?)
    let cas:any = document.querySelector('#qrcode')!.children[this.index*2];
    console.log('cas',this.index,document.querySelector('#qrcode'),cas)
    var data1 = cas.toDataURL('image/jpg');
    img2.src = data1;
    // console.log('selector',document.querySelector('#qrcode')!.children[0])
    // console.log('img2',img2)
    //根据文字长度换行
    let yRight:number = (500 - (this.data.name!.length + this.data.jobTitle!.length) * 8) / 2;
//设置文字css
      img2.onload = ()=>{
      ctx.drawImage(img2,115,242);
      ctx.drawImage(img3,215,342);
      ctx.font="30px PingFangSC-Semibold";
      ctx.fillStyle = '#1C3063';
      ctx.textAlign='center';
      this.data.jobTitle ? ctx.fillText(this.data.name!,yRight,670) : ctx.fillText(this.data.name!,255,670);

      let xOff:number = ( this.data.name!.length + 3 ) * 15;

      ctx.font="20px PingFangSC-Semibold";
      ctx.fillStyle = '#1C3063';
      ctx.textAlign='center';
      ctx.fillText(this.data.jobTitle!,(yRight + xOff),670);
      // ctx.font="26px PingFangSC-Semibold";
      // ctx.fillStyle = '#1C3063'
      // ctx.textAlign='left';
      // ctx.fillText(this.data.department!,300,650);
      let data = canvas.toDataURL();
      // console.log('data',data)
      this.exportArr.unshift({hospital: this.data.hospital!,department:this.data.department!,name:this.data.name!,img:data,position:this.data.position!})
      console.log('---',this.exportArr)
      this.$emit('exportArr',this.exportArr)
      // console.log('绘制时间',(new Date().getTime()-time)/1000)
    }
  }

}

qrcode () {
  let time = new Date().getTime()
  let qrcode = new this.QRCode('qrcode', {
    width: 272, //图像宽度
    height: 272, //图像高度
    colorDark: "#000000", //前景色
    colorLight: "#ffffff", //背景色
    typeNumber: 4,
    correctLevel: this.QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
  })
  // var canvas=qrcode.find('canvas').get(0);
  // qrcode.find('canvas').remove();
  // //如果有循环,此句必不可少 qrcode.find('canvas').remove();
  // var data = canvas.toDataURL('image/jpg');
  qrcode.clear(); //清除二维码
  qrcode.makeCode(this.data.url);//生成另一个新的二维码
  // console.log('url',this.data.url)
  this.$nextTick(()=>{
    this.drawImg()
  })
  // console.log('转二维码的时间',(new Date().getTime()-time)/1000)
}

//效果图