qrcode.js: 简单易用的二维码生成库

最新推荐文章于 2025-05-02 11:18:31 发布

贾雁冰

最新推荐文章于 2025-05-02 11:18:31 发布

阅读量1.8k

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00052/article/details/136776403

qrcode.js是一个简单易用的库，用于在网站中生成动态二维码，支持自定义样式、多种数据类型和响应式设计。它轻量且易于集成，适用于各种场景，是创建二维码的理想选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

qrcode.js: 简单易用的二维码生成库

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

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 的二维码。