vue3使用qrcodejs2-fix生成背景透明的二维码

622 阅读1分钟

qrcodejs官方仓库:GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript

qrcodejs2-fix 是一个用于生成QR码的JavaScript库,使用的时候先安装,然后通过设置前景色和背景色可以控制显示的二维码效果。想生成透明背景的二维码也可以,我通过下面配置前景色和背景色实现了下面的效果:背景透明

 new QRCode(document.getElementById('blueCode'), {
text: blueUrl, // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
width: 200, //二维码宽
height: 200, //二维码高
colorDark: '#ffffff',
colorLight: '#ffffff00', // 透明背景
})

安装和使用

安装

npm install qrcodejs2-fix

引入:

import QRCode from 'qrcodejs2-fix';

在页面中定义容器:

<div id="code"></div>

定义生成二维码的函数:

const getCode = () => {
document.getElementById("code").innerHTML = ""; //清空标签内原有数据,防止多次点击生成多个二维码
new QRCode(document.getElementById("code"), {
text: '000000'
});
};

 调用函数:

<a-button @click="getCode">点击获取二维码</a-button>

QRCode参数说明

参数 说明 默认值
text 需要编码的文字内容 -
width 图像宽度 256
height 图像高度 256
colorDark 前景色 #000000
colorLight 背景色 #ffffff
correctLevel 容错级别,可设置为:QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H QRCode.CorrectLevel.L
typeNumber 二维码类型(1~40,输入 0 以自动检测) 4