轻量级的二维码生成库-QRCode.js

QRCode.js 是用于制作二维码的 javascript 库。主要是通过获取 DOM 标签，在使用 HTML5 Canvas 绘制而成。

QRCode.js 是用原生 javascript 实现，没有任何第三方依赖，所以它的体积只有不到 20kb。

浏览器兼容性

IE	Google Chrome	FireFox	Safari
6+	1+	1+	1+

安装

cdn 引入：

<script src="https://cdn.jsdelivr.net/npm/qrcodejs2@0.0.2/qrcode.min.js"></script>

使用 npm 管理：

npm install qrcodejs2 --save

使用

添加容器标签：

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

引入并实例化 QRcode：

// 简写方式使用
const qrcode = new QRCode("qrcode", "https://juejin.cn/user/1582891999692093");
// options 配置项方式使用
const qrcode = new QRCode("qrcode", {
  text: "https://juejin.cn/user/1582891999692093",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

同时，实例化对象目前还支持两个方法：

// 清理二维码
qrcode.clear();
// 生成新的二维码
qrcode.makeCode("https://juejin.cn/user/1582891999692093");

options 选项详细介绍

选项	作用	默认值	值类型	说明
text	二维码包含的信息	""	string
width	二维码的宽度	256	Number
height	二维码的高度	256	Number
colorDark	二维码颜色	#000000	String	与 canvas 支持的颜色格式一致
colorLight	二维码背景色	#ffffff	String	与 canvas 支持的颜色格式一致
correctLevel	模糊程度	QRCode.CorrectLevel.H	Number	由低到高：QRCode.CorrectLevel.M、QRCode.CorrectLevel.L、QRCode.CorrectLevel.H、QRCode.CorrectLevel.Q，级别越高二维码的容量就会越低，建议使用低级别

配置项效果预览