1. 安装qrcode.react插件
yarn add qrcode.react
// or
npm install qrcode.react --save
2. 使用qrcode.react插件生成二维码
- 引入
import QRCode from 'qrcode.react';
- 使用
<QRCode
id="qrCode"
value="https://www.jianshu.com/u/992656e8a8a6"
size={200} // 二维码的大小
fgColor="#000000" // 二维码的颜色
style={{ margin: 'auto' }}
imageSettings={{ // 二维码中间的logo图片
src: 'logoUrl',
height: 100,
width: 100,
excavate: true, // 中间图片所在的位置是否镂空
}}
/>
3. 下载二维码
<a id="down_link" onClick={this.changeCanvasToPic}>
点击下载
</a>
changeCanvasToPic = () => {
const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
const img = new Image();
img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
const downLink = document.getElementById('down_link');
downLink.href = img.src;
downLink.download = '二维码'; // 图片name
};
4. 定时刷新
项目中开发的是上课的签到二维码，增加了一个三秒刷新的功能，可能是为了避免一张图片签一学期的情况吧，，，，哈哈哈。。。。
定时刷新功能是使用 setInterval 定时更新 value 值来更新二维码，跳转地址后面拼上一个radomCode, radomCode定时更新，就实现二维码的刷新了，要及时清理定时器。
5.效果
