Saturday, April 15, 2023

Quick Bytes: Generate A QR Code

Some quick code to generate a QR code image with HTML and Javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QR Code Generator</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
</head>
<body>
    <form>
        <label for="qr-text">Enter text to generate QR code:</label>
        <input type="text" id="qr-text" name="qr-text">
        <button type="button" onclick="generateQRCode()">Generate QR Code</button>
    </form>
    <canvas id="qr-code"></canvas>
    <script>
        function generateQRCode() {
            var text = document.getElementById("qr-text").value;
            var qr = new QRious({
                element: document.getElementById("qr-code"),
                value: text,
                size: 300 // Change the size to 300 pixels
            });
        }
    </script>
</body>
</html>