Build a QRCode Scanner Web App in Browser Using qr scanner.js Library in Javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>QR Code Scanner</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="flex flex-col items-center justify-center min-h-screen">
        <h1 class="text-4xl font-bold mb-8">QR Code Scanner</h1>
        <div class="mb-4">
            <input type="file" id="image-input" accept="image/*" class="mb-2">
            <img id="preview" src="" alt="Image Preview" class="w-46 h-46 object-contain border-4 border-gray-300 rounded-lg overflow-hidden">
        </div>
        <button id="scan-button" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Scan QR Code from Image</button>
        <textarea id="result-textarea" rows="4" class="mt-4 w-96 border border-gray-300 rounded-lg p-2" placeholder="QR Code result will be displayed here..." readonly></textarea>
        <br><br>
    </div>
    <!-- Include the qr-scanner library -->
    <script type="module">
        import QrScanner from "https://unpkg.com/qr-scanner/qr-scanner.min.js";

        const imageInput = document.getElementById('image-input');
        const preview = document.getElementById('preview');
        const scanButton = document.getElementById('scan-button');
        const resultTextarea = document.getElementById('result-textarea');

        // Display image preview
        imageInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                preview.src = URL.createObjectURL(file);
            }
        });

        // Scan QR code when the button is clicked
        scanButton.addEventListener('click', () => {
            const file = imageInput.files[0];
            if (file) {
                QrScanner.scanImage(file)
                    .then(result => {
                        resultTextarea.value = `QR Code Result: ${result}`; // Show result in textarea
                        console.log(result);
                    })
                    .catch(error => {
                        console.error('Error scanning QR code:', error);
                        resultTextarea.value = 'No QR code found in the image.'; // Show error message in textarea
                    });
            } else {
                resultTextarea.value = 'Please upload an image first.'; // Show message in textarea
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>QR Code Scanner</title>

</head>

<body>

<h1 class="text-4xl font-bold mb-8">QR Code Scanner</h1>

</div>

<button id="scan-button" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Scan QR Code from Image</button>

</div>

import QrScanner from "https://unpkg.com/qr-scanner/qr-scanner.min.js";

const imageInput = document.getElementById('image-input');

const preview = document.getElementById('preview');

const scanButton = document.getElementById('scan-button');

const resultTextarea = document.getElementById('result-textarea');

// Display image preview

imageInput.addEventListener('change', (event) => {

const file = event.target.files[0];

if (file) {

preview.src = URL.createObjectURL(file);

}

});

// Scan QR code when the button is clicked

scanButton.addEventListener('click', () => {

const file = imageInput.files[0];

if (file) {

QrScanner.scanImage(file)

.then(result => {

resultTextarea.value = `QR Code Result: ${result}`; // Show result in textarea

console.log(result);

})

.catch(error => {

console.error('Error scanning QR code:', error);

resultTextarea.value = 'No QR code found in the image.'; // Show error message in textarea

});

} else {

resultTextarea.value = 'Please upload an image first.'; // Show message in textarea

}

});

</script>

</body>

</html>

Build a QRCode Scanner Web App in Browser Using qr scanner.js Library in Javascript

Comments

Leave a Reply Cancel reply

Archives