vue qrcodejs2中间加logo图

<qrcode :code-options="{ code: resident.sfzh, w: 200, h: 200 }" :logoImage="require('@/assets/commonImgs/logoImg.png')"/>

<template>
  <div class='qrcode' ref='qrCode' />
</template>

<script>
import QRcode from 'qrcodejs2'

export default {
  name: 'index',
  props: {
    codeOptions: {
      type: Object
    },
    logoImage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  created() {
    this.$nextTick(function() {
      this.createQrcode()
    })
  },
  methods: {
// 生成二维码
    createQrcode() {
      this.$nextTick(()=>{
        let container=this.$refs.qrCode
        if (container.innerHTML!='') { // 有新的二维码地址了，先把之前的清除掉
          container.innerHTML = ''
        }
      let { code = '', w, h } = this.codeOptions
      let qrcode=new QRcode(container, {
        text: code,
        width: w || 100,
        height: h || 100,
        colorLight: '#FFFFFF',//二维码背景颜色
        colorDark: '#000',//二维码颜色
        correctLevel: QRcode.CorrectLevel.H//容错率,L/M/H
      })

      // 添加二维码中间的图片
      if (this.logoImage) {
        let logo = new Image()
        logo.crossOrigin='Anonymous'
        logo.src = this.logoImage
        logo.onload = () => {
          let qrImg = qrcode._el.getElementsByTagName('img')[0]
          let canvas = qrcode._el.getElementsByTagName('canvas')[0]
          canvas.style.display = 'inline-block'
          let ctx = canvas.getContext('2d')
          // 设置logo的大小为二维码图片缩小的3.7倍，第二与第三参数代表logo在二维码的位置
          ctx.drawImage(logo, (w - w / 3.7) / 2, (w - w / 3.7) / 2, w / 3.7, w / 3.7)
          qrImg.src = canvas.toDataURL()
          qrImg.style.display = 'none'
          container.appendChild(qrcode._el)
        }

      }
      })
    }
  }
}
</script>

<style scoped>
.qrcode {
  display: inline-block;
  background-color: #ffffff;
  padding: 32px;
  box-sizing: border-box;
}
</style>