vue3 生成二维码（可添加文字和logo）并可以下载二维码

1.安装 vue - qr

 npm install vue-qr -s

2.引入和使用 

 
<template>
 
      <div class="qrBox">
        //模版中使用
        <vue-qr 
            id="payQR" 
            v-if="codeText" 
            :text="codeText" 
            :size="248" 
            colorDark="#5559FF" 
            colorLight="#ffffff"
            :logoSrc="logoImg" 
            :callback="getImgInfo">
 
        </vue-qr>
 
      </div>
 
</template>

<script setup>
import { ref } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue' 引入vue-qr组件
 
const codeText=ref();   拿到生成二维码的数据后赋值给 codeText 
 
 // 下载二维码
function downloadQrCode(row) {
 
  const iconUrl = proxy.$refs.Qrcode.$el.src; 
  const a = document.createElement("a"); //自定义a标签
  const event = new MouseEvent("click"); //自定义鼠标点击事件
  a.download = "活动二维码";
  a.href = iconUrl;
  a.dispatchEvent(event); //触发自定义事件
}
// 生成二维码
function getImgInfo(qrUrl) {
  const img = new Image();
  img.src = qrUrl;
  img.onload = () => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const text = "要添加的文字";

    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    // 设置轮廓颜色和宽度
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 3;

    // 绘制文字轮廓
    ctx.strokeText(
      text,
      canvas.width / 2 - ctx.measureText(text).width / 2,
      canvas.height / 1.6
    );

    ctx.font = "bold 10px"; // 设置字体大小和类型
    ctx.fillStyle = "white"; // 设置字体颜色
    ctx.fillText(
      text,
      canvas.width / 2 - ctx.measureText(text).width / 2,
      canvas.height / 1.6
    ); // 在图片中心添加文字

    document.getElementById("payQR").src = canvas.toDataURL("image/png");
  };
}
 
<script/>

3.示例展示