Vue3 使用qrcode实现 地址生成二维码，带logo

最近有做二维码的需求，于是看了下qrcode，通过画布来绘制二维码，实现如下

1. 先安装qrcode

npm install --save qrcode

2. template

<template>
    <div> 二维码 </div>
    <div class="code">
      <canvas v-if="record.channelCode" id="canvas" ref="canvas"></canvas>
    </div>
</template>

3. js

<script>
  import QRCode from 'qrcode';

  export default {
    name: 'Box',
    props: {
      record: {
        type: Object,
        default: () => ({}),
      },
    },
    data () {
      return {
        qrCodeUrl: process.env.VUE_APP_CODE + '?Code=', //自己的地址，我这边是用了env环境里的
        logoSrc: require('../../../images/logo.jpg'), //自己的图片
      };
    },
    watch: {  //做了个监测，我的父级是不同的单元格，点击事件就可以对应相应的code变化
      record: {
        async handler (val) {
          const { code } = val;
          if (channelCode) {
            try {
              this.spinning = true;
              this.generateQRCode(this.record.code);
            }
            catch (e) {
              console.warn(e);
            }
          }
        },
        deep: true,
        immediate: true,
      },
    },
    mounted () {
      this.generateQRCode(this.record.code);
    },
    methods: {
      async generateQRCode (code) {
        // console.log(code);
        if (!code) return;
        const canvas = this.$refs.canvas;
        if (!canvas) return; // 如果canvas不存在，则不执行后续操作
        const ctx = canvas.getContext('2d');
        const qrSize = 202;
        canvas.width = qrSize;
        canvas.height = qrSize;
        // 下面开始刷新我的二维码，对应父级点击事件
        // 清除canvas上的旧内容
        ctx.clearRect(0, 0, qrSize, qrSize);
        // 生成新的二维码
        await QRCode.toCanvas(canvas, this.qrCodeUrl + code, { width: qrSize });
        // 加载并绘制logo
        const logo = new Image();
        logo.src = this.logoSrc;
        logo.onload = () => {
          const logoSize = qrSize * 0.2;
          const logoX = (qrSize - logoSize) / 2;
          const logoY = (qrSize - logoSize) / 2;
          ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
        };
      },
    },
  };
</script>

4. css

<style lang="less" scoped>
// #canvas {
.code {
  width: 202px; /* 与二维码生成的宽度一致 */
  height: 202px; /* 与二维码生成的高度一致 */
}
</style>

呈现效果（打码了）