zoukankan      html  css  js  c++  java
  • 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地址

  • 相关阅读:
    最大公约数与最小公倍数
    素数筛
    基础数学问题
    考试前打模板
    斐波那契公约数
    期望及期望dp
    状压dp总结
    树链剖分学习
    B君的教育
    [noip2016]愤怒的小鸟
  • 原文地址:https://www.cnblogs.com/a-cat/p/12068012.html
Copyright © 2011-2022 走看看