Use qrcode in Vue to implement rendering and generate QR codes to add a custom logo-demo in the middle

Effect 

Install

npm i qrcode

use 

import QRCode from 'qrcode';

 Specific generation process

<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>

We first create a new canvaselement to hold the generated QR code. Then, use QRCode.toCanvasthe method to generate the QR code into a new canvaselement.

Next, in logo.onloadthe event handler, we create an Imageobject to load the logo image and draw the logo in the middle of the QR code. Finally, convert the generated QR code into a data URL and assign it to qrDataUrla variable.