当前位置：首页 > JavaScript

js实现二维码生成

2026-04-05 03:42:19JavaScript

使用QRCode.js库生成二维码

QRCode.js是一个轻量级的JavaScript库，用于生成二维码。它不依赖其他库，可以直接在浏览器中使用。

安装方式：

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

基本用法：

// 创建二维码容器
<div id="qrcode"></div>

// 生成二维码
new QRCode(document.getElementById("qrcode"), {
    text: "https://example.com",
    width: 128,
    height: 128
});

高级选项：

new QRCode(document.getElementById("qrcode"), {
    text: "自定义内容",
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

使用jQuery-qrcode插件

对于使用jQuery的项目，jQuery-qrcode是一个方便的插件。

安装：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-qrcode@1.0.0/jquery.qrcode.min.js"></script>

使用方法：

$("#qrcode").qrcode({
    render: "canvas", // 或"table"
    text: "jQuery生成的二维码",
    width: 150,
    height: 150
});

使用原生Canvas API实现

不依赖任何库，使用原生Canvas API生成二维码：

function generateQRCode(text, size) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = size;
    canvas.height = size;

    // 这里应实现二维码生成算法
    // 简化的示例只是绘制一个方块
    ctx.fillStyle = "#000000";
    ctx.fillRect(10, 10, size-20, size-20);

    return canvas;
}

document.body.appendChild(generateQRCode("原生实现", 100));

注意事项

二维码生成质量取决于算法实现。对于生产环境，建议使用成熟的库如QRCode.js，它实现了完整的QR码规范。

动态更新二维码内容：

const qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "初始内容",
    width: 128,
    height: 128
});

// 更新内容
document.getElementById("updateBtn").addEventListener("click", function() {
    qrcode.makeCode(document.getElementById("newText").value);
});

错误修正级别：

js实现二维码生成