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

tianya • 2024-03-23 • JavaScript

一、使用方法

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

版权声明：
作者：tianya
链接：https://tya.zone/p/146.html
来源：天涯博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
qrcode generator - 使用JS动态显示二维码
一、使用方法 1.1、引入 JS <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script&……
<<上一篇
下一篇>>