效果 

安装

npm i qrcode

使用 

import QRCode from 'qrcode';

 具体生成过程

<template>
    <div class="banner-login">
      <img :src="qrDataUrl" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import QRCode from 'qrcode';
import { getNewCode } from '@/api/sefatyCenter';
import { useRouter } from 'vue-router';
const router = useRouter();
const goPath = (r) => {
  router.push({
    path: r
  });
};



let qrDataUrl = ref();
let secret = ref('');
const getCode = async () => {
  const {
    data: { data }
  } = await getNewCode();
  console.log(data);
  secret.value = data.secret;
  //直接生成二维码不做处理
  // qrDataUrl.value = await QRCode.toDataURL(data.uri);

  // 创建一个新的canvas元素来容纳二维码
  const qrCodeCanvas = document.createElement('canvas');
  qrCodeCanvas.width = 200; // 根据需要调整二维码尺寸
  qrCodeCanvas.height = 200;

  // 生成二维码到新的canvas元素
  await QRCode.toCanvas(qrCodeCanvas, data.uri);

  // 在二维码中间添加logo
  const ctx = qrCodeCanvas.getContext('2d');
  const logo = new Image();
  logo.src = require('@/assets/images/logo.png');
  logo.onload = function () {
    const logoSize = qrCodeCanvas.width * 0.26; // 根据需要调整logo尺寸
    const logoX = (qrCodeCanvas.width - logoSize) / 2;
    const logoY = (qrCodeCanvas.height - logoSize) / 2;

    // 绘制二维码
    ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);

    // 将生成的二维码插入到页面中
    qrDataUrl.value = qrCodeCanvas.toDataURL();
  };
};
getCode();


</script>

我们首先创建一个新的canvas元素，用于容纳生成的二维码。然后，使用QRCode.toCanvas方法将二维码生成到新的canvas元素中。

接下来，在logo.onload事件处理程序中，我们创建一个Image对象来加载logo图像，并在二维码中间绘制logo。最后，将生成的二维码转换为数据URL，并将其赋值给qrDataUrl变量。