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

最新推荐文章于 2025-04-15 08:28:33 发布

写代码也要符合基本法

最新推荐文章于 2025-04-15 08:28:33 发布

阅读量3.8k

点赞数 1

分类专栏： HTML学习笔记文章标签： js qrcode 二维码

本文链接：https://blog.csdn.net/liouzch/article/details/82662156

版权

HTML学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单易用的二维码生成库的使用方法，包括如何引入JS文件、定义DOM容器及调用函数来生成二维码图片。此外，还详细解释了API接口，如QRCodeFactory和QRCode等，并提供了一个完整的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用方法

1.1、引入 JS

HTML Code
<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 容器

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

1.3、调用函数

JavaScript Code
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 日语汉字

参数

类型

说明

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

[注] 须在调用 make() 后使用。