美文网首页js css html
qrcode generator - 使用JS动态显示二维码

qrcode generator - 使用JS动态显示二维码

作者: 涅槃快乐是金 | 来源:发表于2022-10-12 23:38 被阅读0次

    一、使用方法

    1.1、引入 JS

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.min.js"></script>
    

    1.2、DOM 容器

    <div id="qrcode"></div>
    

    1.3、调用函数

    var qr = qrcode(4, "H");
    qr.addData("your content");
    qr.make();
    document.getElementById("qrcode").innerHTML = qr.createImgTag();
    

    二、API接口说明

    2.1、QRCode Factory

    • QRCode qrcode(typeNumber,errorCorrectionLevel);
      创建二维码对象。
    参数 类型 说明
    typeNumber Number 二维码类型(1~40,输入 0 以自动检测)
    errorCorrectionLevel String 容错级别(L、M、Q、H)
    • number[] qrcode.stringToBytes(str);
      将任意字符集的字符串编译成字节序列。这个函数是internal的,重写这个函数可在多字节字符集下编译字符串。
    参数 类型 说明
    str String 待编译的字符串

    2.2、QRCode

    • void addData(data, mode);
      添加二维码信息。
    参数 类型 说明
    data String 二维码信息
    mode String 信息编译模式,可设置为:Numeric 数字;Alphanumeric 文字数字混合;Byte 字节(默认);Kanji 日语汉字
    • void make();
      生成二维码对象(并不显示)。

    • number getModuleCount();
      获取二维码每行(orientation)的 cell 数 [注]。

    • boolean isDark(row, col);
      返回指定行列上的 cell 是否有信息(黑色)[注]。

    参数 类型 说明
    row Number 行坐标(0~moduleCount-1)
    col Number 列坐标(0~moduleCount-1)
    • string createDataURL(cellSize, margin);
    • string createImgTag(cellSize, margin, alt);
    • string createSvgTag(cellSize, margin);
    • string createTableTag(cellSize, margin);
    • string createASCII(cellSize, margin);
      相应的HTML Helper函数,主要用于显示二维码 [注]。

    |参数 |类型 |说明|
    |cellSize|Number|cell 像素宽度,默认为 2|
    |margin|Number|补白像素宽度,默认为 cellSize*4|
    |alt|String|image 的提示|

    三、例程

    <!DOCTYPE html>
    <html>
     <head>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.min.js"></script> 
     </head> 
     <body>
      <div id="qrcode"></div>
      <script type="text/javascript">
       var width = 256;
       var margin = 2;
       var qr = qrcode(4, 'H');
       qr.addData('BestHelp Consulting');
       qr.make();
       var moduleCount = qr.getModuleCount();
       var cell = (width - margin * 2) / moduleCount;
       document.getElementById('qrcode').innerHTML = qr.createImgTag(cell, margin);
      </script> 
     </body>
    </html>
    

    四、参考链接

    https://www.npmjs.com/package/qrcode-generator

    相关文章

      网友评论

        本文标题:qrcode generator - 使用JS动态显示二维码

        本文链接:https://www.haomeiwen.com/subject/ckpxzrtx.html