二维码生成 JavaScript库 QRCode.js：实现高效二维码创建与自定义

二维码生成 | JavaScript库 QRCode.js：实现高效二维码创建与自定义

2025年8月最新动态
随着移动支付和数字化营销的持续增长，二维码的应用场景进一步扩大，据最新行业报告显示，全球二维码扫描量在2025年上半年同比增长23%，尤其在零售、活动签到和智能家居设备配对领域表现突出，在这一背景下，开发者对轻量、高效的二维码生成工具的需求也显著增加。

为什么选择 QRCode.js？

QRCode.js 是一个纯 JavaScript 实现的轻量级二维码生成库，无需依赖任何后端服务或复杂框架，仅需几行代码即可在网页中快速生成二维码，它的优势包括：

• 纯前端实现：不依赖服务器，减少网络请求和延迟。
• 高度可定制：支持调整尺寸、颜色、纠错级别等参数。
• 兼容性强：支持现代浏览器及部分旧版本（如IE8+）。
• 开源免费：MIT 许可证，可自由用于商业项目。

快速上手 QRCode.js

引入库文件

你可以直接通过 CDN 或下载本地文件引入 QRCode.js：

<script src="qrcode.min.js"></script>

基础用法

以下是一个最简单的例子，将文本转换为二维码并显示在页面上：

// 在指定DOM元素中生成二维码
var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://example.com",
  width: 128,
  height: 128
});

自定义二维码样式

QRCode.js 支持通过参数调整二维码外观：

new QRCode("qrcode", {
  text: "Hello, 2025!",
  width: 200,
  height: 200,
  colorDark: "#FF5733",  // 深色模块颜色（默认黑色）
  colorLight: "#F0F8FF", // 浅色背景颜色（默认白色）
  correctLevel: QRCode.CorrectLevel.H // 纠错级别（L/M/Q/H）
});

动态更新内容

如果需要实时修改二维码内容（比如用户输入时同步生成），可以调用 makeCode 方法：

var qrcode = new QRCode("qrcode");
function updateQR(text) {
  qrcode.makeCode(text);
}
// 示例：绑定输入框事件
document.getElementById("input").addEventListener("input", function() {
  updateQR(this.value);
});

高级技巧

支持中文与特殊字符

QRCode.js 默认支持 UTF-8 编码，可直接生成包含中文的二维码：

new QRCode("qrcode", { text: "你好，世界！" });

添加 Logo 或图标

虽然 QRCode.js 本身不直接支持内嵌图片，但可以通过 CSS 叠加实现：

<div id="qrcode-container" style="position: relative;">
  <div id="qrcode"></div>
  <img src="logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%;">
</div>

性能优化

对于需要批量生成二维码的场景（如表格中的每一行），建议复用同一个 QRCode 实例而非重复创建。

常见问题

Q：生成的二维码无法扫描？

• 检查纠错级别（correctLevel），较高的级别（如 H）容错能力更强。
• 确保颜色对比度足够（深色模块与浅色背景）。

Q：如何导出为图片？
QRCode.js 生成的二维码是 DOM 元素（Canvas 或 Table），可通过浏览器右键保存，或使用 toDataURL 方法编程导出：

var canvas = document.querySelector("#qrcode canvas");
var imgData = canvas.toDataURL("image/png");

QRCode.js 以其简单易用和灵活性成为前端生成二维码的热门选择，无论是用于用户名片、Wi-Fi 共享还是动态数据展示，它都能轻松应对，2025年，随着 WebAssembly 等技术的普及，类似工具的性能还将进一步提升，但 QRCode.js 的轻量化优势仍不可替代。

试试看，用不到 5 分钟为你的下一个项目添加二维码功能吧！