效果 

 使用 

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);// 在二维码中间添加logoconst 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变量。