正文
react生成二维码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
图片实例:
简介：
QRCode.js 是一个生成二维码的JS库。主要是通过获取 DOM 的节点,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
用法：
1. 在项目中引入qrcode.min.js文件。 js文件网盘地址: https://pan.baidu.com/s/1kHB90FpMAJUvGvDNPpMm7Q 提取码： hkz4
2. 创建ref节点：
<div style={{ width, height }} ref={qrcodeRef} />
3. 在render中创建ref 提供一个dom节点：
const qrcodeRef = React.createRef();
4. 定义创建二维码的方法，以及调用：
function createdCode(id) {
new QRCode(qrcodeRef.current, {
text: `${url}?id=${id}`, // url or text
width, // 二维码宽度
height, // 二维码高度
colorDark, // 二维码颜色
colorLight, //二维码背景底色
correctLevel: QRCode.CorrectLevel.H, //层级等级
});
}
其他方法：
const [qrc, setQrcode] = useState(''); //state中定义qrcodefunction creatCoe() {
if(qrc) {
qrc.makeCode('text'); // 重新生成二维码
} else {
const qrcode = new QRCode(qrcodeRef.current, {
text,
width,
height,
colorDark,
colorLight,
correctLevel: QRCode.CorrectLevel.H,
});
setQrcode(qrcode); //在state中储存 qrcode
}
}qrc.clear(); //清除代码
这样就会生成一个base64的img，如果要下载功能，去除当前节点的base64图片的src即可！
QRCode.js ------------------------------------------------> GitHub地址
