Create qr.html

simonw · web-flow · commit ff38692a6735 · 2024-10-17T14:50:14.000-07:00
https://gist.github.com/simonw/c2b0c42cd1541d6ed6bfe5c17d638039
diff --git a/qr.html b/qr.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enhanced QR Code Decoder</title>
+    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #dropArea {
+            border: 2px dashed #ccc;
+            border-radius: 20px;
+            width: 100%;
+            margin: 20px auto;
+            padding: 20px;
+            text-align: center;
+        }
+        #dropArea.highlight {
+            border-color: purple;
+        }
+        #fileElem {
+            display: none;
+        }
+        #result {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Enhanced QR Code Decoder</h1>
+    <p>Upload, drag & drop, or paste a QR code image:</p>
+    <div id="dropArea">
+        <input type="file" id="fileElem" accept="image/*">
+        <label for="fileElem">Select a file or drag & drop here</label>
+    </div>
+    <div id="result"></div>
+
+    <script>
+        // Ensure jsQR is loaded before proceeding
+        window.onload = function() {
+            if (typeof jsQR === 'undefined') {
+                document.getElementById('result').innerHTML = "Error: QR code library not loaded. Please check your internet connection and refresh the page.";
+                return;
+            }
+
+            const dropArea = document.getElementById('dropArea');
+            const fileElem = document.getElementById('fileElem');
+            const result = document.getElementById('result');
+
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, preventDefaults, false);
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropArea.addEventListener(eventName, highlight, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropArea.addEventListener(eventName, unhighlight, false);
+            });
+
+            function highlight(e) {
+                dropArea.classList.add('highlight');
+            }
+
+            function unhighlight(e) {
+                dropArea.classList.remove('highlight');
+            }
+
+            dropArea.addEventListener('drop', handleDrop, false);
+            fileElem.addEventListener('change', handleFiles, false);
+            document.addEventListener('paste', handlePaste, false);
+
+            function handleDrop(e) {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                handleFiles(files);
+            }
+
+            function handleFiles(files) {
+                const file = files instanceof FileList ? files[0] : this.files[0];
+                if (file) {
+                    decodeQR(file);
+                }
+            }
+
+            function handlePaste(e) {
+                const items = e.clipboardData.items;
+                for (let i = 0; i < items.length; i++) {
+                    if (items[i].type.indexOf('image') !== -1) {
+                        const blob = items[i].getAsFile();
+                        decodeQR(blob);
+                        break;
+                    }
+                }
+            }
+
+            function decodeQR(file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.onload = function() {
+                        const canvas = document.createElement('canvas');
+                        const context = canvas.getContext('2d');
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        context.drawImage(img, 0, 0, img.width, img.height);
+                        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                        const code = jsQR(imageData.data, imageData.width, imageData.height);
+                        
+                        if (code) {
+                            let content = code.data;
+                            if (isValidUrl(content)) {
+                                content = `<a href="${content}" target="_blank">${content}</a>`;
+                            }
+                            result.innerHTML = `Decoded content: ${content}`;
+                        } else {
+                            result.innerHTML = "No QR code found in the image.";
+                        }
+                    };
+                    img.src = e.target.result;
+                };
+                reader.readAsDataURL(file);
+            }
+
+            function isValidUrl(string) {
+                try {
+                    new URL(string);
+                    return true;
+                } catch (_) {
+                    return false;
+                }
+            }
+        };
+    </script>
+</body>
+</html>
