qrcode generator - 使用JS动态显示二维码
2022-10-12 本文已影响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>
四、参考链接
