version 4 of the HTML / CSS / JS build for a QR Code Generator

rnddave · May 14, 2024 · d3ce111 · d3ce111
1 parent 79b2888
commit d3ce111
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!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>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>QR Code Generator</h1>
+    <form id="qr-form">
+        <label for="url">Target URL:</label>
+        <input type="text" id="url" name="url" required><br><br>
+        <label for="logo">Logo Image:</label>
+        <input type="file" id="logo" name="logo" accept="image/*" required><br><br>
+        <label for="format">Choose format:</label>
+        <select id="format" name="format" required>
+            <option value="png">PNG</option>
+            <option value="svg">SVG</option>
+        </select><br><br>
+        <button type="submit">Generate QR Code</button>
+    </form>
+    <div id="qr-preview"></div>
+    <a id="download-link" style="display:none;">Download</a>
+
+    <script src="https://cdn.jsdelivr.net/npm/qrcode"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,58 @@
+document.getElementById('qr-form').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    const url = document.getElementById('url').value;
+    const logoFile = document.getElementById('logo').files[0];
+    const format = document.getElementById('format').value;
+
+    const qrCodeDiv = document.createElement('div');
+    qrCodeDiv.id = 'qr-code';
+
+    // Generate the QR code
+    QRCode.toCanvas(qrCodeDiv, url, { errorCorrectionLevel: 'H', width: 300 }, function (error) {
+        if (error) console.error(error);
+
+        const qrCanvas = qrCodeDiv.querySelector('canvas');
+
+        const context = qrCanvas.getContext('2d');
+        const image = new Image();
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            image.onload = function() {
+                const logoSize = 50;
+                const x = (qrCanvas.width - logoSize) / 2;
+                const y = (qrCanvas.height - logoSize) / 2;
+                context.drawImage(image, x, y, logoSize, logoSize);
+
+                // Convert to desired format and show preview
+                let imgDataUrl;
+                if (format === 'png') {
+                    imgDataUrl = qrCanvas.toDataURL('image/png');
+                } else if (format === 'svg') {
+                    // For simplicity, we convert the canvas to PNG and then to SVG using html2canvas
+                    html2canvas(qrCanvas).then(canvas => {
+                        imgDataUrl = canvas.toDataURL('image/png');
+                        download(imgDataUrl, `qr_code.${format}`);
+                    });
+                    return;
+                }
+
+                displayResult(imgDataUrl, format);
+            }
+            image.src = e.target.result;
+        }
+        reader.readAsDataURL(logoFile);
+    });
+});
+
+function displayResult(imgDataUrl, format) {
+    const qrPreview = document.getElementById('qr-preview');
+    qrPreview.innerHTML = `<img src="${imgDataUrl}" alt="QR Code Preview">`;
+
+    const downloadLink = document.getElementById('download-link');
+    downloadLink.style.display = 'block';
+    downloadLink.href = imgDataUrl;
+    downloadLink.download = `qr_code.${format}`;
+    downloadLink.textContent = `Download as ${format}`;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,13 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 20px;
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+#qr-preview {
+    margin-top: 20px;
+}