qrcodejs 生成二维码图片

qrcodejs 生成二维码图片（2026更新）

qrcodejs 是一个轻量级、纯前端、无后端依赖的 JavaScript 二维码生成库，压缩后仅几 KB，支持自定义尺寸、颜色、logo、纠错级别，是网页端生成分享码、登录码、支付码的首选方案。

本文覆盖快速上手、核心配置、高级玩法、常见问题全流程，附完整可运行代码，跟着步骤走就能生成完美的二维码。

一、前置准备：2种引入方式

方式1：CDN 快速引入（适合快速测试/简单页面）

直接在 HTML 中引入 CDN 链接，无需安装任何依赖：

1 2	`<!-- 推荐使用 jsdelivr CDN，稳定快速 --> <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>`

方式2：npm 安装（适合工程化项目/Vue/React）

如果是 Vue/React/Angular 等工程化项目，通过 npm 安装：

1	`npm install qrcodejs --save`

安装后在项目中引入：

// ES6 引入
import QRCode from 'qrcodejs';

// CommonJS 引入
const QRCode = require('qrcodejs');

二、快速上手：5分钟生成第一个二维码

话不多说，直接上完整可运行的代码，复制到 HTML 文件中打开就能看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>qrcodejs 快速上手</title>
    <!-- 引入 qrcodejs -->
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <!-- 二维码容器：必须是块级元素，有明确的宽高（可选，也可以在JS中配置） -->
    <div id="qrcode" style="width: 200px; height: 200px; margin: 50px auto;"></div>

    <script>
        // 实例化 QRCode 对象，生成二维码
        const qrcode = new QRCode(
            // 第一个参数：二维码容器（可以是 DOM 元素，也可以是元素 ID）
            document.getElementById('qrcode'),
            // 第二个参数：配置对象
            {
                text: 'https://www.example.com', // 二维码内容（必填）：可以是网址、文本、手机号等
                width: 200,                      // 二维码宽度（像素）
                height: 200,                     // 二维码高度（像素）
                colorDark: '#000000',            // 二维码深色（通常是黑色）
                colorLight: '#ffffff',            // 二维码浅色（通常是白色）
                correctLevel: QRCode.CorrectLevel.H // 纠错级别（H=最高，推荐）
            }
        );
    </script>
</body>
</html>

运行这段代码，页面中间就会出现一个 200x200 的二维码，扫描后会跳转到 https://www.example.com。

三、核心配置：一张表搞懂所有参数

qrcodejs 的配置非常灵活，以下是所有可用参数的详细说明：

参数	类型	必填	默认值	说明
`text`	String	✅ 是	-	二维码内容：可以是网址、文本、手机号、邮箱、JSON 字符串等
`width`	Number	❌ 否	256	二维码宽度（像素）
`height`	Number	❌ 否	256	二维码高度（像素）
`colorDark`	String	❌ 否	‘#000000’	二维码深色（码点颜色），支持十六进制、RGB、颜色名
`colorLight`	String	❌ 否	‘#ffffff’	二维码浅色（背景颜色），支持十六进制、RGB、颜色名
`correctLevel`	Number	❌ 否	QRCode.CorrectLevel.M	纠错级别，决定二维码的容错能力： - `QRCode.CorrectLevel.L`：7%容错 - `QRCode.CorrectLevel.M`：15%容错（默认） - `QRCode.CorrectLevel.Q`：25%容错 - `QRCode.CorrectLevel.H`：30%容错（推荐，适合加 logo）

避坑提醒：correctLevel 设为 H（最高）时，二维码的容错能力最强，即使中间加了 logo 或有部分遮挡，也能正常扫描，加 logo 时必须设为 H。

四、高级玩法：解决实际开发中的常见需求

1. 生成带 logo 的二维码（最常用）

qrcodejs 本身不直接支持加 logo，但我们可以通过 CSS 绝对定位把 logo 盖在二维码中间，配合最高纠错级别，实现完美的带 logo 二维码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带 logo 的二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        /* 二维码容器：相对定位，作为 logo 的定位基准 */
        #qrcode-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        /* logo 样式：绝对定位在中间，宽高设为二维码的 1/5 左右，避免遮挡太多 */
        #qrcode-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 8px; /* 可选：给 logo 加圆角 */
            border: 2px solid white; /* 可选：给 logo 加白色边框，更美观 */
            background: white; /* 可选：给 logo 加白色背景 */
        }
    </style>
</head>
<body>
    <div id="qrcode-container">
        <!-- 二维码容器 -->
        <div id="qrcode"></div>
        <!-- logo 图片 -->
        <img id="qrcode-logo" src="https://www.example.com/logo.png" alt="logo">
    </div>

    <script>
        const qrcode = new QRCode(document.getElementById('qrcode'), {
            text: 'https://www.example.com',
            width: 200,
            height: 200,
            correctLevel: QRCode.CorrectLevel.H // 必须设为最高纠错级别！
        });
    </script>
</body>
</html>

关键要点：

logo 宽高不要超过二维码的 1/5，否则遮挡太多会导致扫描失败；

必须把 correctLevel 设为 QRCode.CorrectLevel.H（最高容错）；

logo 最好加白色背景和边框，提升辨识度。

2. 动态修改二维码内容

比如输入框输入内容，点击按钮实时生成二维码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态生成二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div style="text-align: center; margin: 50px;">
        <input type="text" id="input-text" placeholder="输入网址或文本" style="width: 300px; padding: 10px;">
        <button id="generate-btn" style="padding: 10px 20px; margin-left: 10px;">生成二维码</button>
    </div>
    <div id="qrcode" style="width: 200px; height: 200px; margin: 0 auto;"></div>

    <script>
        // 先实例化一个空的二维码对象
        const qrcode = new QRCode(document.getElementById('qrcode'), {
            width: 200,
            height: 200,
            correctLevel: QRCode.CorrectLevel.H
        });

        // 点击按钮生成二维码
        document.getElementById('generate-btn').addEventListener('click', function() {
            const text = document.getElementById('input-text').value.trim();
            if (!text) {
                alert('请输入内容！');
                return;
            }
            // 核心：调用 makeCode() 方法重新生成二维码
            qrcode.makeCode(text);
        });
    </script>
</body>
</html>

核心方法：qrcode.makeCode(text)，可以动态修改二维码内容，无需重新实例化。

3. 下载二维码为图片

qrcodejs 生成的是 canvas 或 img 元素，我们可以把它转换成图片并下载：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>下载二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode" style="width: 200px; height: 200px; margin: 50px auto;"></div>
    <div style="text-align: center;">
        <button id="download-btn" style="padding: 10px 20px;">下载二维码</button>
    </div>

    <script>
        const qrcode = new QRCode(document.getElementById('qrcode'), {
            text: 'https://www.example.com',
            width: 200,
            height: 200,
            correctLevel: QRCode.CorrectLevel.H
        });

        // 点击下载
        document.getElementById('download-btn').addEventListener('click', function() {
            // 找到二维码容器里的 img 或 canvas 元素
            const qrImg = document.querySelector('#qrcode img') || document.querySelector('#qrcode canvas');
            
            // 如果是 canvas，转换成 dataURL
            let imgUrl;
            if (qrImg.tagName === 'CANVAS') {
                imgUrl = qrImg.toDataURL('image/png');
            } else {
                imgUrl = qrImg.src;
            }

            // 创建 a 标签模拟点击下载
            const link = document.createElement('a');
            link.download = 'qrcode.png'; // 下载文件名
            link.href = imgUrl;
            link.click();
        });
    </script>
</body>
</html>

4. 清除二维码

如果需要清除已生成的二维码，调用 clear() 方法：

1	`qrcode.clear(); // 清除二维码`

五、常见问题排查：90%的人都会遇到的坑

1. 二维码不显示

检查容器是否是块级元素（div、p 等），不要用 span 等行内元素；
检查容器是否有明确的宽高（可以在 CSS 中设置，也可以在 JS 配置中设置）；
检查 text 参数是否为空，空内容无法生成二维码；
检查 qrcodejs 是否正确引入，打开浏览器控制台看是否有 QRCode is not defined 错误。

2. 二维码扫描不出来

检查 text 内容是否合法：网址要带 http:// 或 https://，不要有特殊字符；
检查二维码尺寸是否太小：建议至少 150x150 像素，太小手机扫描困难；
检查 colorDark 和 colorLight 对比度是否足够：不要用相近的颜色，比如浅灰和白色；
如果加了 logo，检查 logo 是否太大（不要超过二维码的 1/5），且 correctLevel 是否设为 H。

3. 生成的二维码模糊

增大二维码的 width 和 height，建议至少 200x200 像素；

如果是在高 DPI 屏幕（如 Retina 屏）上显示，可以生成 2 倍尺寸的二维码，再用 CSS 缩放到需要的大小：

// 生成 400x400 的二维码
const qrcode = new QRCode(document.getElementById('qrcode'), {
    text: 'https://www.example.com',
    width: 400,
    height: 400
});

/* CSS 缩放到 200x200 */
#qrcode {
    width: 200px;
    height: 200px;
}
#qrcode img, #qrcode canvas {
    width: 100%;
    height: 100%;
}

4. 中文内容乱码

qrcodejs 本身支持中文，但如果 text 是中文，建议先对中文进行 URL 编码，避免部分扫描器识别问题：

// 对中文内容进行 URL 编码
const text = encodeURIComponent('你好，世界！');
const qrcode = new QRCode(document.getElementById('qrcode'), {
    text: text,
    width: 200,
    height: 200
});

六、总结

qrcodejs 是一个非常轻量、易用的二维码生成库，适合以下场景：

网页端快速生成分享码、登录二维码、支付码；
纯前端实现，无需后端接口；
自定义尺寸、颜色、logo，满足个性化需求。

如果需要更复杂的功能（比如批量生成、矢量二维码、更多样式），可以考虑 qrcode 库（另一个更强大的库，支持 Node.js 和浏览器），但对于 90% 的场景，qrcodejs 已经完全够用了。

学无止境

qrcodejs 生成二维码图片

https://cszy.top/2016-04-07 qrcodejs-生成二维码图片插件/

作者

csorz

发布于

2016年4月7日

许可协议

javascript编码规范上一篇