码迷,mamicode.com
首页 > 其他好文 > 详细

react生成二维码

时间:2019-12-19 15:49:27      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:tps   html5   实例   const   new   背景   asc   com   can   

图片实例:

技术图片

简介:

  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生成二维码

标签:tps   html5   实例   const   new   背景   asc   com   can   

原文地址:https://www.cnblogs.com/a-cat/p/12068012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!