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中定义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地址

巴特西

react生成二维码

最新文章

热门文章