Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/qr.md Secret

Created October 17, 2024 21:49
Show Gist options
  • Save simonw/c2b0c42cd1541d6ed6bfe5c17d638039 to your computer and use it in GitHub Desktop.
Save simonw/c2b0c42cd1541d6ed6bfe5c17d638039 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
qr.md

QR Code Decoder Artifact

human (Oct 17, 2024, 02:45 PM)

Build an artifact (no react) that lets me paste in a QR code and displays the decoded information, with a hyperlink if necessary

assistant (Oct 17, 2024, 02:45 PM)

Certainly! I'll create an HTML artifact that allows you to paste in a QR code image and displays the decoded information, including a hyperlink if the decoded content is a URL. This solution will use a QR code decoding library and some simple JavaScript to handle the functionality.

QR Code Decoder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Decoder</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsqrcode/1.0.0/jsQR.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>QR Code Decoder</h1>
    <p>Paste your QR code image URL below:</p>
    <input type="text" id="imageUrl" placeholder="Paste image URL here" style="width: 100%; padding: 5px;">
    <button onclick="decodeQR()">Decode QR Code</button>
    <div id="result"></div>

    <script>
        function decodeQR() {
            const imageUrl = document.getElementById('imageUrl').value;
            const resultDiv = document.getElementById('result');
            
            if (!imageUrl) {
                resultDiv.innerHTML = "Please enter an image URL.";
                return;
            }

            const img = new Image();
            img.crossOrigin = "Anonymous";
            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>`;
                    }
                    resultDiv.innerHTML = `Decoded content: ${content}`;
                } else {
                    resultDiv.innerHTML = "No QR code found in the image.";
                }
            };
            img.onerror = function() {
                resultDiv.innerHTML = "Error loading image. Please check the URL and try again.";
            };
            img.src = imageUrl;
        }

        function isValidUrl(string) {
            try {
                new URL(string);
                return true;
            } catch (_) {
                return false;
            }
        }
    </script>
</body>
</html>

I've created an HTML artifact that provides a simple QR code decoder. Here's how it works:

  1. The page has an input field where you can paste the URL of a QR code image.
  2. When you click the "Decode QR Code" button, it fetches the image and attempts to decode it using the jsQR library.
  3. If a QR code is successfully decoded, it displays the content.
  4. If the decoded content is a valid URL, it's displayed as a clickable hyperlink.

To use this decoder:

  1. Find a QR code image online and copy its URL.
  2. Paste the URL into the input field on the page.
  3. Click the "Decode QR Code" button.
  4. The decoded content will appear below, with a hyperlink if it's a valid URL.

Note that this decoder works with image URLs, not with uploaded files or pasted image data. If you need functionality for directly uploaded or pasted images, let me know, and I can modify the code to accommodate that.

Is there anything you'd like me to explain or modify in this QR code decoder?

human (Oct 17, 2024, 02:46 PM)

have a file open box that also lets you drag and drop and add a onpaste handler to the page that catches pasted images as well

assistant (Oct 17, 2024, 02:46 PM)

Certainly! I'll modify the QR code decoder to include file upload functionality with drag-and-drop support, as well as the ability to paste images directly onto the page. This will make the tool more versatile and user-friendly.

Enhanced QR Code Decoder

<!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://cdnjs.cloudflare.com/ajax/libs/jsqrcode/1.0.0/jsQR.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>
        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>

I've updated the QR code decoder with the following enhancements:

  1. File Upload: There's now a file input that allows users to select image files from their device.

  2. Drag and Drop: Users can drag and drop image files onto the designated area.

  3. Paste Functionality: The page now has a paste event handler that can detect and process pasted image data.

Here's a breakdown of the new features:

  1. File Upload and Drag & Drop:

    • The <input type="file"> element allows for file selection.
    • The drop area is styled to provide visual feedback when dragging files.
    • Event listeners handle the drag and drop functionality.

  2. Paste Handling:

    • A paste event listener is added to the document.
    • When an image is pasted, it's extracted from the clipboard and processed.

  3. QR Code Decoding:

    • The decodeQR function now accepts a file object instead of a URL.
    • It uses FileReader to read the file data and create an image.
    • The image is then processed to extract QR code data using the jsQR library.

To use this enhanced decoder:

  1. Click on the drop area to select a file, or drag and drop an image file onto it.
  2. Alternatively, copy an image containing a QR code and paste it anywhere on the page.
  3. The decoded content will appear below, with a hyperlink if it's a valid URL.

This version provides a more flexible and user-friendly experience, allowing for various methods of inputting QR code images. Is there anything else you'd like me to explain or modify in this enhanced QR code decoder?

human (Oct 17, 2024, 02:47 PM)

Uncaught ReferenceError: jsQR is not defined

assistant (Oct 17, 2024, 02:47 PM)

I apologize for that oversight. It seems the jsQR library isn't loading correctly. Let's fix that by ensuring the library is properly included and loaded before we use it. I'll update the artifact to address this issue.

Enhanced QR Code Decoder - Fixed

<!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://cdnjs.cloudflare.com/ajax/libs/jsQR/1.4.0/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>

I've made the following changes to fix the issue:

  1. Updated the jsQR library source: I've changed the script source to use a more recent version of jsQR from CDN: https://cdnjs.cloudflare.com/ajax/libs/jsQR/1.4.0/jsQR.min.js. This ensures we're using a stable, minified version of the library.

  2. Added a window.onload event: All the JavaScript code is now wrapped inside a window.onload function. This ensures that the code only runs after the page and all its resources (including the jsQR library) have fully loaded.

  3. Added a check for jsQR: At the beginning of the window.onload function, we now check if jsQR is defined. If it's not, we display an error message to the user, informing them that the QR code library failed to load.

These changes should resolve the "jsQR is not defined" error. The QR code decoder will now wait for all resources to load before initializing, and it will provide a helpful error message if the jsQR library fails to load for any reason.

To use this fixed version:

  1. The interface remains the same: you can click to upload, drag and drop, or paste an image containing a QR code.
  2. The page will now ensure all resources are loaded before allowing interaction.
  3. If there's an issue loading the jsQR library (e.g., due to network issues), you'll see an error message in the result area.

Is there anything else you'd like me to explain or modify in this QR code decoder?

@simonw
Copy link
Author

simonw commented Oct 17, 2024

I had to swap the script out for this:

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>

The one it tried was 404.

@codinginbarn
Copy link

Very simple and useful but my results seem to tank:

image

No QR code found in the image.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment