Hướng dẫn tạo QR Code Generator bằng HTML, CSS và JavaScript

QR code và QR Code Generator là gì?

QR code (Quick Response code) là một dạng mã vạch hai chiều có thể chứa nhiều loại dữ liệu như đường dẫn website, số điện thoại, email hoặc đoạn văn bản. Ưu điểm của QR code là dễ quét, dung lượng lưu trữ lớn và có thể sử dụng trong nhiều ngữ cảnh như thanh toán, đăng nhập, chia sẻ liên kết hoặc tải ứng dụng.

QR Code Generator là công cụ nhận dữ liệu đầu vào từ người dùng và chuyển đổi thành hình ảnh QR code. Khi kết hợp với JavaScript trên trình duyệt, quá trình sinh mã QR có thể diễn ra ngay lập tức mà không cần gửi dữ liệu lên máy chủ.

Lợi ích của việc tự xây dựng QR Code Generator

Tự xây dựng một QR Code Generator bằng HTML, CSS và JavaScript mang lại nhiều lợi ích:

• Chủ động tùy chỉnh giao diện, ngôn ngữ và trải nghiệm sử dụng.
• Không phụ thuộc vào dịch vụ bên ngoài để sinh mã QR.
• Tận dụng được các thư viện JavaScript mã nguồn mở nhẹ, dễ tích hợp.
• Phù hợp cho các bài học lập trình front end hoặc tài liệu hướng dẫn kỹ thuật.

Sử dụng thư viện JavaScript để tạo QR code

Thay vì tự viết toàn bộ thuật toán, có thể dùng một thư viện JavaScript nhỏ gọn hỗ trợ sinh QR code trực tiếp trên trình duyệt. Thư viện này thường được phân phối qua CDN và chỉ cần thêm một thẻ <script> là có thể sử dụng ngay.

Ví dụ cách nhúng thư viện QR code từ CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Sau khi nhúng, đối tượng QRCode sẽ sẵn sàng để khởi tạo và vẽ mã QR vào một phần tử HTML bất kỳ.

Cấu trúc HTML cơ bản của QR Code Generator

Một QR Code Generator đơn giản thường gồm các phần:

• Trường nhập nội dung hoặc URL.
• Nút tạo mã QR.
• Khu vực hiển thị ảnh QR code.

Ví dụ cấu trúc HTML tối giản:

<div class="qr-generator">
    <label for="qr-input">Nhập nội dung hoặc URL</label>
    <input id="qr-input" type="text" placeholder="https://example.com">

    <button id="qr-generate-btn" type="button">Tạo QR code</button>

    <div id="qr-result"></div>
</div>

Thẻ div có id="qr-result" là nơi thư viện JavaScript sẽ vẽ mã QR sau khi người dùng bấm nút.

CSS cơ bản cho giao diện QR Code Generator

Một ít CSS sẽ giúp bố cục rõ ràng hơn, tạo khoảng cách giữa ô nhập, nút bấm và khu vực hiển thị kết quả. Ví dụ CSS dưới đây mang tính chất minh họa:

.qr-generator {
    max-width: 420px;
    margin: 16px 0;
}

.qr-generator label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.qr-generator input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.qr-generator button {
    margin-top: 4px;
    padding: 6px 12px;
    cursor: pointer;
}

#qr-result {
    margin-top: 16px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Khu vực hiển thị kết quả được đặt chiều cao tối thiểu để bố cục không bị xê dịch khi mã QR xuất hiện.

Viết JavaScript để sinh mã QR

JavaScript sẽ đọc dữ liệu từ ô nhập, kiểm tra nội dung và sử dụng thư viện QR code để vẽ hình. Mỗi lần người dùng bấm nút Tạo QR code, khu vực kết quả sẽ được làm mới và hiển thị mã QR tương ứng.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

(function() {
    var input = document.getElementById("qr-input");
    var button = document.getElementById("qr-generate-btn");
    var result = document.getElementById("qr-result");
    var qrInstance = null;

    function generateQR() {
        var text = (input.value || "").trim();
        if (!text) {
            result.innerHTML = "<p>Vui lòng nhập nội dung hoặc đường dẫn trước khi tạo mã QR.</p>";
            return;
        }

        result.innerHTML = "";

        qrInstance = new QRCode(result, {
            text: text,
            width: 200,
            height: 200,
            correctLevel: QRCode.CorrectLevel.H
        });
    }

    button.addEventListener("click", generateQR);

    input.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
            generateQR();
        }
    });
})();

Đoạn mã trên khởi tạo một đối tượng QRCode mới mỗi khi cần sinh mã, với kích thước cố định 200×200 pixel và mức độ sửa lỗi cao.

Demo QR Code Generator

Ví dụ dưới đây là một demo hoạt động trực tiếp của QR Code Generator. Người đọc có thể nhập một đoạn văn bản hoặc URL bất kỳ, sau đó nhấn nút để tạo mã QR và quét thử bằng điện thoại.

Mở rộng tính năng cho QR Code Generator

Từ phiên bản cơ bản, QR Code Generator có thể được mở rộng với nhiều tính năng nâng cao:

• Thêm tùy chọn kích thước mã QR với các độ lớn khác nhau.
• Cho phép chọn mức độ sửa lỗi (error correction level) tùy theo nhu cầu sử dụng.
• Tùy chỉnh màu nền và màu nét của mã QR để phù hợp với nhận diện thương hiệu.
• Thêm nút tải xuống hình ảnh QR code ở định dạng PNG.

Kết luận

QR Code Generator là một ví dụ thực tế cho thấy việc kết hợp HTML, CSS và JavaScript cùng với thư viện bên thứ ba có thể tạo ra một công cụ hữu ích ngay trên trình duyệt.

Người dùng chỉ cần nhập nội dung và nhận lại mã QR trong thời gian ngắn, phù hợp với nhiều tình huống như chia sẻ liên kết, giới thiệu sản phẩm hoặc cung cấp thông tin bổ sung một cách nhanh chóng và tiện lợi.