【亲测免费】 qrcode.js: 简单易用的二维码生成库

2026-01-14 18:03:36作者：苗圣禹Peter

qrcode.js 是一个轻量级、易于使用的 JavaScript 库，用于生成二维码（QR code）图像。只需几行代码，您就可以在网站中添加动态生成二维码的功能。无论是用于分享网址、传递信息还是存储数据，qrcode.js 都是理想的选择。

功能与用途

生成 QR code 图像：使用 qrcode.js 可轻松创建 QR code 图片，并将其插入网页中的任何位置。
自定义样式：您可以调整二维码的颜色、大小等属性，以匹配您的网站设计风格。
支持多种数据类型：除了文本之外，qrcode.js 还支持其他数据类型，如网址、电子邮件地址、电话号码等。
响应式布局：生成的二维码会自动适应屏幕尺寸，无论在桌面端还是移动端都能正常显示。

特点

轻量级：qrcode.js 的文件大小仅为 7 KB (压缩后)，加载速度快，不会影响网站性能。
易于集成：无需复杂设置，通过简单 API 即可快速实现二维码生成功能。
兼容性好：支持所有现代浏览器及部分旧版本浏览器。
完全开源：qrcode.js 是基于 MIT 许可证发布的开源项目，您可以自由地使用、修改和分发。

如何使用

要在您的项目中使用 qrcode.js，请按照以下步骤操作：

获取 qrcode.js 文件：有两种方式获取 qrcode.js 文件：
- 直接下载：访问 <> 并下载最新版的 qrcode.min.js 文件。
- 引入 CDN：在 HTML 文件中添加以下脚本引用：
```
<script src="https://cdn.jsdelivr.net/npm/@davidshimjs/qrcodejs@0.0.2/dist/qrcode.min.js"></script>
```

在网页中生成二维码：

使用如下示例代码，将 text 替换为您想要生成的二维码内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qrcode.js 示例</title>
</head>
<body>
    <div id="qrcode-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/@davidshimjs/qrcodejs@0.0.2/dist/qrcode.min.js"></script>
    <script>
        var qrcodeElement = document.getElementById('qrcode-container');
        new QRCode(qrcodeElement, {
            text: "https://example.com",
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });
    </script>
</body>
</html>

上述代码将在页面中生成一个包含指定 URL 的二维码。

自定义样式：

要根据需要调整二维码的样式，请参阅官方文档了解更多信息。

示例

要查看 qrcode.js 的实际应用，请访问在线示例页面：</samples/index.html>

结语

借助 qrcode.js，您可以在网站上轻松实现动态二维码生成功能。它具有易于使用、轻量级和高度定制的特点，适合各种应用场景。现在就开始使用创建属于您自己的二维码吧！

qrcodejs

Cross-browser QRCode generator for javascript

项目地址：https://gitcode.com/gh_mirrors/qr/qrcodejs

登录后查看全文

【亲测免费】 qrcode.js: 简单易用的二维码生成库

功能与用途

特点

如何使用

示例

结语

项目优选