使用vue3 vue-qr 生成二维码（可添加logo和文字）

目录

vue中生成二维码

1. 安装 vue - qr

2.使用

3.样例展示

4.配置参数

vue3中vue-qr生成二维码

1. 安装 vue - qr

npm install vue-qr --sav

2.使用

<script setup>
import { ref } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue' 引入vue-qr组件

const codeText=ref();

//----to do  拿到生成二维码的数据后赋值给 codeText 即可,此处就省略了

<script/>

<template>

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

        </vue-qr>

      </div>

</template>

到这里其实我们已经成功生成二维码了

text  生成二维码的数据

size  二维码的尺寸

colorDark  colorLight 设置二维码的颜色

logoSrc  中心logo。

还有一个回调函数callback。

text是必要参数，其他都可不要。

:callback="getImgInfo" 为二维码制作完成后的回调函数。如果有额外的需求，可以在回调函数里操作。

下面是，生成二维码后，在二维码上追加文字。

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 = '#994AE7';
        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');
      };
    }

原理是拿到生成的二维码后通过 canvas 对图片进行加工，

3.样例展示

通过回调加上自定义文字的效果：

4.配置参数

注意：logomargin  属性添加logo外边距后 二维码 很可能无法识别，谨慎使用！