QRCode.js 是一个非常流行的 JavaScript 库，用于在浏览器中生成二维码。它非常轻量并且简单易用。下面是 QRCode.js 的详细使用方法，包括安装、配置、生成二维码以及定制样式等内容。
1. 引入 QRCode.js 库
你可以通过以下两种方式之一来使用 QRCode.js：
1.1 通过 CDN 引入
直接在 HTML 文件中引入库，不需要安装任何包：
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
1.2 通过 npm 安装
如果你在使用 Node.js 或前端构建工具（如 Webpack、Parcel 等），你可以使用 npm 来安装 QRCode.js：
npm install qrcode
然后在你的 JavaScript 文件中导入它：
import QRCode from 'qrcode';
2. 基本用法
以下示例展示了如何在网页中生成一个简单的二维码。
2.1 生成二维码到 Canvas 元素
你可以通过 QRCode.toCanvas() 方法将二维码直接绘制到一个 <canvas> 元素上。以下是一个基本示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate QR Code</title>
</head>
<body>
<h1>Generate QR Code with QRCode.js</h1>
<canvas id="qrcode"></canvas>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
const text = "https://www.example.com"; // 要编码的内容
const canvas = document.getElementById('qrcode'); // 获取 canvas 元素
QRCode.toCanvas(canvas, text, function(error) {
if (error) {
console.error(error);
} else {
console.log("QR Code successfully generated!");
}
});
</script>
</body>
</html>
2.2 生成二维码到图片 (Image)
你还可以使用 QRCode.toDataURL() 方法生成二维码图像的 Base64 编码，然后将其显示为 <img> 元素的 src 属性。以下是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generate QR Code</title>
</head>
<body>
<h1>Generate QR Code as Image</h1>
<img id="qrcodeImage" alt="QR Code">
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
const text = "https://www.example.com"; // 要编码的内容
const imageElement = document.getElementById('qrcodeImage'); // 获取 img 元素
QRCode.toDataURL(text, function(error, url) {
if (error) {
console.error(error);
} else {
imageElement.src = url; // 将二维码图像显示在 img 元素中
console.log("QR Code image successfully generated!");
}
});
</script>
</body>
</html>
3. 定制二维码样式
QRCode.js 允许你定制二维码的外观，例如改变大小、颜色、容错等级等。以下是一些常用的配置项。
3.1 定制颜色和大小
你可以设置二维码的前景色、背景色、模块大小（单个块的尺寸）、以及二维码的错误修正级别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom QR Code</title>
</head>
<body>
<h1>Custom QR Code</h1>
<canvas id="customQrcode"></canvas>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
const text = "https://www.example.com"; // 要编码的内容
const canvas = document.getElementById('customQrcode'); // 获取 canvas 元素
const options = {
width: 300, // 二维码的宽度
height: 300, // 二维码的高度
color: {
dark: '#000000', // 二维码的前景色（黑色）
light: '#ffffff' // 二维码的背景色（白色）
},
errorCorrectionLevel: 'H' // 错误修正级别：L (低), M (中), Q (较高), H (最高)
};
QRCode.toCanvas(canvas, text, options, function(error) {
if (error) {
console.error(error);
} else {
console.log("Custom QR Code successfully generated!");
}
});
</script>
</body>
</html>
3.2 自定义容错级别
QRCode.js 提供了 4 个错误修正级别，默认是 M，你可以根据需要选择：
L— 低容错率（大约 7% 的数据可以丢失）M— 中容错率（大约 15% 的数据可以丢失）Q— 高容错率（大约 25% 的数据可以丢失）H— 最高容错率（大约 30% 的数据可以丢失）
const options = {
errorCorrectionLevel: 'H', // 设置错误修正级别
};
3.3 二维码边距和模块大小
- margin：二维码与周围边缘的空白区域。
- scale：控制二维码中单个模块（块）的大小。
const options = {
margin: 10, // 边距，默认是 4
scale: 4 // 模块大小，默认是 4
};
4. 生成静态二维码与动态二维码
4.1 静态二维码
静态二维码是简单的二维码，它包含固定的信息，例如网址、文本等。这种二维码不随时间或设备改变。
QRCode.toDataURL('https://www.example.com', function (err, url) {
console.log(url); // 输出二维码的 base64 编码图像
});
4.2 动态二维码
动态二维码可以通过服务器端生成并与数据库或 URL 动态连接，它们可以在扫码后指向不同的目标地址。你可以通过在服务器端管理 URL 跳转来实现动态二维码。
5. 总结
QRCode.js 是一个功能强大且易于使用的二维码生成库，可以在浏览器中快速生成各种样式的二维码。通过简单的配置，你可以定制二维码的颜色、尺寸、容错级别等，并且支持将二维码绘制到 Canvas 或以图像格式输出。
