react生成二维码

Posted 2021-03-22 a-cat

图片实例:

简介：

　　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中定义qrcode


function 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地址