How Can I Generate QR Codes with Python & Flask?

in this tutorial, We’ll explore how to generate QR code Using Python. I am using Flask framework to create UI. We’ll walk through the steps to build a QR code generator using Python and Flask.

Python is a popular and widely used programming language known for its simplicity and readability. Flask, a lightweight Python web framework, developers can create web apps quickly and effectively.

What is a QR Code

The Quick Response (QR) codes have become an integral part of our daily lives. We utilize QR codes for various purposes such as making payments, redeeming offers, downloading apps, and booking tickets

QR Code Generate Using Python

Let’s develop a project to generate custom QR codes using Python and flask.

Setting Up the Environment

Create a project directory named generate-qrcode-python and install the necessary modules by running the following command:

pip install Flask
pip install qrcode

The above command will install qrcode Python module, which is used to generate QR codes, also installed Flask, which is a micro-framework for web applications.

Create Flask Application

We’ll then develop the primary Flask application. Import the necessary modules and define the Flask application in a file called app.py. We’ll configure a process to manage form submissions and generate an HTML template that will provide the user interface for the QR code generator.

from flask import Flask, render_template, request
from main import generateQRCode

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():    
    generatedCode = ''
    message = ''
    if request.method == 'POST':        
        qrSt = str(request.form['qrSt'])
        if qrSt:
            generatedCode = generateQRCode(qrSt)
        else:
            message = 'Please enter text to generate code'
    return render_template('index.html', message=message, generatedCode=generatedCode)

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

Create a QR Code Generator Function

Now, let’s create a separate file named main.py to implement the QR code generation functionality. We’ll use the qrcode module to generate the QR code image and convert it to a base64-encoded string for displaying in the browser.

import qrcode
from io import BytesIO
import base64
 
def generateQRCode(text: str, img_name: str = 'QRCode.png') -> any:
    code = qrcode.QRCode(
        version=1, 
        box_size=10,
        border=4
    )
    code.add_data(text)
    code.make(fit=True)
    img = code.make_image(fill_color='black', back_color='white')
    buffer = BytesIO()
    img.save(buffer, format="PNG")    
    qrCode = f"data:image/png;base64,{base64.b64encode(buffer.getvalue()).decode()}"
    return qrCode

Creating the HTML Template

Finally, let’s create an HTML template named index.html to display the user interface for our QR code generator. This template includes a form for entering text to be encoded into a QR code and displays the generated QR code image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
</head>
<body>
    <div class="container">
        <div class="row">  
            <div class="col-md-6 mx-auto"><br>
                <h1>QR Code Generator</h1><br>
                <form method="POST" class="">
                    {% if message %}
                        <div class="alert alert-warning">{{ message }}</div>
                    {% endif %}
                    <div class="form-group">
                        <label>Enter Text to Generate QR Code:</label><br />
                        <input type="text" class="form-control" name="codeText" placeholder="Enter text here...">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary">Generate QR Code</button>       
                </form>
            </div>
        </div>
    </div>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">     
                {% if generatedCode %}
                    <div class="qr-code-container text-center p-4 rounded border bg-light">
                        <div class="alert alert-primary alert-dismissible fade show mb-3 text-center" role="alert">
                            You can download the image by clicking on it.
                        </div>
                        <a href="{{ generatedCode }}" download="qrcode.png">
                            <img src="{{ generatedCode }}" alt="QR Code" class="img-fluid rounded">
                        </a>
                    </div>
                {% endif %}     
            </div>
        </div>
    </div>
</body>
</html>

Conclusion

Hurry! You’ve successfully built a QR code generator using Python and Flask. You’ve learned how to create a simple yet powerful script for generating custom QR codes in this article by using Python’s QR code module and Flask’s web framework.