当前位置：首页 > JavaScript

js实现二维码生成

2026-03-02 02:51:04JavaScript

使用QRCode.js库生成二维码

QRCode.js是一个轻量级的JavaScript库，无需依赖其他库即可生成二维码。以下是具体实现方法：

安装或引入库

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

基础用法

// 在指定DOM元素中生成二维码
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 // 纠错级别(L/M/Q/H)
});

使用HTML5 Canvas API原生实现

对于不想引入第三方库的情况，可以通过Canvas原生API实现：

js实现二维码生成

基础绘制函数

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

    // 这里需要实现二维码算法
    // 实际项目建议使用库，此处仅为示意
    ctx.fillStyle = '#000';
    ctx.fillRect(10, 10, 50, 50);

    return canvas;
}

document.body.appendChild(generateQRCode('test', 200));

通过Node.js后端生成

使用qrcode npm包在服务端生成：

安装包

js实现二维码生成

npm install qrcode

服务端生成示例

const QRCode = require('qrcode');

// 生成DataURL
QRCode.toDataURL('https://example.com', {
    errorCorrectionLevel: 'H',
    type: 'image/png',
    margin: 1
}, (err, url) => {
    console.log(url);
});

// 直接生成文件
QRCode.toFile('./qrcode.png', 'https://example.com', {
    color: {
        dark: '#00F',
        light: '#FFF'
    }
});

生成带Logo的二维码

结合QRCode.js和图像处理实现：

function generateQRWithLogo(text, size, logoUrl) {
    const qrcode = new QRCode(document.getElementById("qrcode"), {
        text: text,
        width: size,
        height: size
    });

    // 异步加载Logo
    const img = new Image();
    img.onload = function() {
        const canvas = document.querySelector("#qrcode canvas");
        const ctx = canvas.getContext('2d');

        // 计算Logo位置和大小
        const logoSize = size * 0.2;
        const x = (size - logoSize) / 2;
        const y = (size - logoSize) / 2;

        ctx.drawImage(img, x, y, logoSize, logoSize);
    };
    img.src = logoUrl;
}

响应式二维码生成

使二维码适应不同屏幕尺寸：

function responsiveQRCode(containerId, text) {
    const container = document.getElementById(containerId);
    const size = Math.min(container.offsetWidth, 400);

    new QRCode(container, {
        text: text,
        width: size,
        height: size
    });

    window.addEventListener('resize', function() {
        container.innerHTML = '';
        const newSize = Math.min(container.offsetWidth, 400);
        new QRCode(container, {
            text: text,
            width: newSize,
            height: newSize
        });
    });
}

生成SVG格式二维码

使用qrcode-generator库生成SVG：

<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<script>
    const qr = qrcode(0, 'H');
    qr.addData('https://example.com');
    qr.make();
    document.getElementById('svg-container').innerHTML = qr.createSvgTag();
</script>

以上方法提供了从简单到高级的多种二维码生成方案，可根据项目需求选择适合的实现方式。对于大多数Web应用，推荐使用QRCode.js库，它提供了良好的兼容性和丰富的配置选项。