qrcode generator - 使用JS动态显示二维码
一、使用方法
1.1、引入 JS
1
2
| <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 容器
1.3、调用函数
1
2
3
4
| 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 的提示|
三、例程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!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
