生成动态二维码

创作时间:

作者:

@小白创作中心

生成动态二维码

引用

来源

https://docs.pingcode.com/baike/3682042

在现代Web开发中，动态二维码的生成是一个常见的需求，广泛应用于支付、会员管理、商品追踪等领域。本文将详细介绍如何使用JavaScript生成动态二维码，包括使用QRCode.js库、qrious库以及结合后端服务进行生成等方法。

一、使用QRCode.js生成动态二维码

QRCode.js是一个轻量级的JavaScript库，专门用于生成二维码。它简单易用，不依赖其他库，非常适合初学者。

1、引入QRCode.js

首先，需要在HTML文件中引入QRCode.js库。可以通过CDN引入，也可以下载库文件到本地。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script>
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "https://example.com",
            width: 128,
            height: 128,
        });
    </script>
</body>
</html>

2、动态更新二维码内容

要生成动态二维码，可以通过JavaScript更新二维码的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <input type="text" id="text" placeholder="输入文本生成二维码">
    <button onclick="generateQRCode()">生成二维码</button>
    <script>
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "",
            width: 128,
            height: 128,
        });
        function generateQRCode() {
            var text = document.getElementById("text").value;
            qrcode.clear(); // 清除当前二维码
            qrcode.makeCode(text); // 生成新的二维码
        }
    </script>
</body>
</html>

二、使用qrious库生成动态二维码

qrious是一个更强大且灵活的库，适合需要更多自定义选项的场景。

1、引入qrious库

同样，可以通过CDN引入qrious库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
</head>
<body>
    <canvas id="qrcode"></canvas>
    <input type="text" id="text" placeholder="输入文本生成二维码">
    <button onclick="generateQRCode()">生成二维码</button>
    <script>
        var qr = new QRious({
            element: document.getElementById('qrcode'),
            size: 200,
            value: ''
        });
        function generateQRCode() {
            var text = document.getElementById("text").value;
            qr.set({
                value: text
            });
        }
    </script>
</body>
</html>

2、自定义二维码外观

qrious库提供了丰富的配置选项，可以自定义二维码的颜色、大小等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态二维码</title>
    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
</head>
<body>
    <canvas id="qrcode"></canvas>
    <input type="text" id="text" placeholder="输入文本生成二维码">
    <button onclick="generateQRCode()">生成二维码</button>
    <script>
        var qr = new QRious({
            element: document.getElementById('qrcode'),
            size: 200,
            value: '',
            background: 'white',
            foreground: 'black',
            level: 'H'
        });
        function generateQRCode() {
            var text = document.getElementById("text").value;
            qr.set({
                value: text,
                background: 'yellow',
                foreground: 'blue'
            });
        }
    </script>
</body>
</html>

三、结合后端服务生成动态二维码

在某些情况下，可能需要结合后端服务来生成二维码，例如需要在二维码中嵌入复杂的动态数据。

1、后端服务生成二维码

假设使用Node.js和express搭建一个简单的后端服务，使用qrcode库生成二维码。

const express = require('express');
const QRCode = require('qrcode');
const app = express();
const port = 3000;

app.get('/generate', (req, res) => {
    const text = req.query.text;
    QRCode.toDataURL(text, (err, url) => {
        if (err) res.send('Error occurred');
        res.send(`<img src="${url}" />`);
    });
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

2、前端调用后端服务

前端可以通过Ajax请求后端服务生成二维码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成动态二维码</title>
</head>
<body>
    <input type="text" id="text" placeholder="输入文本生成二维码">
    <button onclick="generateQRCode()">生成二维码</button>
    <div id="qrcode"></div>
    <script>
        function generateQRCode() {
            var text = document.getElementById("text").value;
            var xhr = new XMLHttpRequest();
            xhr.open("GET", `/generate?text=${encodeURIComponent(text)}`, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("qrcode").innerHTML = xhr.responseText;
                }
            };
            xhr.send();
        }
    </script>
</body>
</html>