如何在Flask Python中生成并保存唯一二维码图片

需求说明 #

现有前端通过qrcodejs库根据输入的College ID生成二维码，需结合Flask实现将生成的唯一二维码图片保存到指定文件夹，并以该College ID作为文件名。

前端代码修改 #

调整二维码生成逻辑，将生成的二维码转为Base64格式后发送给Flask后端保存：

<div class="input-container">
    <label for="college_id">College ID</label>
    <input type="text" id="college_id" name="college_id" placeholder="College ID" />
</div>

<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

<div class="form">
    <button type="button" onclick="generateQRCode()">
        Generate QR Code
    </button>
    <div id="qrcode-container" name="qrcode">
        <div id="qrcode" class="qrcode"></div>
    </div>
</div>

<script type="text/javascript">
    function generateQRCode() {
        let college_id_code = document.getElementById("college_id").value;
        if (college_id_code) {
            let qrcodeContainer = document.getElementById("qrcode");
            qrcodeContainer.innerHTML = "";
            
            // 生成二维码，指定参数确保输出图片格式
            new QRCode(qrcodeContainer, {
                text: college_id_code,
                width: 128,
                height: 128,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });

            // 延迟获取图片（确保二维码生成完成）
            setTimeout(() => {
                const qrImg = qrcodeContainer.querySelector('img');
                if (qrImg) {
                    // 提取Base64图片数据
                    const base64Data = qrImg.src.split(';base64,').pop();
                    // 发送请求到后端保存
                    fetch('/save-qrcode', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            college_id: college_id_code,
                            qr_base64: base64Data
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        data.success ? 
                            alert(`二维码已保存，文件名：${college_id_code}.png`) :
                            alert('保存失败：' + data.message);
                    })
                    .catch(error => {
                        console.error('保存出错:', error);
                        alert('保存过程中出现错误');
                    });
                }
            }, 500);

            document.getElementById("qrcode-container").style.display = "block";
        } else {
            alert("请输入唯一的College ID");
        }
    }
</script>

Flask后端实现 #

创建Flask应用，接收前端发送的Base64数据，解码后保存到指定文件夹：

1. 安装依赖 #

执行命令安装Flask：

pip install flask

2. Flask应用代码（app.py） #

from flask import Flask, request, jsonify
import base64
import os

app = Flask(__name__)

# 指定二维码保存文件夹
QR_SAVE_DIR = "./qrcode_images"

# 自动创建保存文件夹（如果不存在）
if not os.path.exists(QR_SAVE_DIR):
    os.makedirs(QR_SAVE_DIR)

@app.route('/save-qrcode', methods=['POST'])
def save_qrcode():
    try:
        data = request.get_json()
        college_id = data.get('college_id')
        qr_base64 = data.get('qr_base64')

        if not college_id or not qr_base64:
            return jsonify({'success': False, 'message': '缺少必要参数'})

        # 解码Base64数据
        qr_image_data = base64.b64decode(qr_base64)
        # 生成以College ID命名的文件路径
        file_path = os.path.join(QR_SAVE_DIR, f"{college_id}.png")

        # 写入文件
        with open(file_path, 'wb') as f:
            f.write(qr_image_data)

        return jsonify({'success': True, 'message': '二维码保存成功'})
    except Exception as e:
        return jsonify({'success': False, 'message': str(e)})

@app.route('/')
def index():
    # 返回前端页面（确保index.html与app.py在同一目录）
    return open('index.html').read()

if __name__ == '__main__':
    app.run(debug=True)

运行步骤 #

1. 将修改后的前端代码保存为index.html，与app.py放在同一目录。
2. 启动Flask应用：

python app.py

3. 打开浏览器访问http://localhost:5000，输入College ID点击生成按钮，二维码将在页面显示，同时保存到./qrcode_images文件夹下，文件名为[College ID].png。

内容的提问来源于stack exchange，提问作者Surendra Kathariya