当前位置：首页 > JavaScript

qrcode js实现

2026-02-01 16:07:59JavaScript

QRCode.js 实现方法

QRCode.js 是一个轻量级的 JavaScript 库，用于生成二维码。以下是实现步骤：

安装 QRCode.js 可以通过 npm 安装或直接引入 CDN 链接：

npm install qrcode

或

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

基本用法 在 HTML 中创建一个容器用于显示二维码：

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

通过 JavaScript 生成二维码：

qrcode js实现

const qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "https://example.com",
  width: 128,
  height: 128,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H
});

自定义选项

text: 二维码内容（必填）。
width/height: 二维码尺寸（默认 256）。
colorDark: 二维码深色部分颜色（默认 #000000）。
colorLight: 二维码浅色部分颜色（默认 #ffffff）。
correctLevel: 容错级别（L、M、Q、H）。

动态更新二维码 调用 makeCode 方法更新内容：

qrcode.makeCode("https://new-content.com");

生成二维码图片 使用 toDataURL 生成 Base64 图片：

qrcode js实现

QRCode.toDataURL("https://example.com", {
  width: 200,
  margin: 2
}, (err, url) => {
  if (err) throw err;
  console.log(url); // 输出 Base64 图片 URL
});

注意事项

确保容器有明确的宽度和高度。
在移动端使用时，可通过 CSS 调整二维码尺寸适配屏幕。

高级用法示例

生成带 Logo 的二维码

先生成普通二维码。
使用 Canvas 或 DOM 操作在二维码中央叠加 Logo。

响应式设计 通过监听窗口大小变化动态调整二维码尺寸：

window.addEventListener("resize", () => {
  const size = Math.min(window.innerWidth, window.innerHeight) * 0.8;
  qrcode._htOption.width = size;
  qrcode._htOption.height = size;
  qrcode.makeCode(qrcode._htOption.text);
});

QRCode.js 兼容所有现代浏览器，包括 IE6-10 等老旧浏览器。