vue合成带二维码的海报

<template>
    <div class="invitePosterPage">
      <!-- 这里是你生成完成的海报，背景图+二维码 -->
      <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg"/>
      <div v-else id="poster" class="flex-row" style="position: relative">
        <img class="poster-bg" src="你的背景图的地址"/>
        <!-- canvas里是你的二维码 -->
        <canvas class="qr" id="qrCode-canvas"></canvas>
      </div>
    </div>
</template>

<script>
  // npm i qrcode --save
  import QRCode from 'qrcode'
  // npm i html2canvas --save
  import html2canvas from 'html2canvas';

  export default {
    name: 'Poster',
    data () {
      return {
        posterDataUrl:''
      }
    },
  
    async mounted () {
        this.createQRCode()
    },
    
    methods: {
      createQRCode () {
        //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
        let canvas = document.getElementById('qrCode-canvas')
        QRCode.toCanvas(canvas, 'www.baidu.com', (error) => {
          if (error) {
            console.log(error)
          } else {
            //qrcode 生成的二维码会带有一些默认样式，需要调整下
            canvas.style.width = '1rem'
            canvas.style.height = '1rem'
            let poster = document.getElementById('poster')
            html2canvas(poster).then(canvas => {
              this.posterDataUrl = canvas.toDataURL()
            });
          }
        })
      }
    },
  }
</script>

<style scoped>
.poster-bg{
  position: relative;
}
.qr{
    height: 1rem;
    position: absolute;
    bottom: 0.5rem;
    left: 1.4rem;
}
</style>