search

trasherdk / html5-qrcode

A cross platform HTML5 QR code reader
https://qrcode.minhazav.dev
Apache License 2.0
0 stars 0 forks source link

Snippet: Scan code from file / image #3

Open trasherdk opened 2 years ago

trasherdk commented 2 years ago

Be aware that scanFile() uses the <div id="reader" width="600px"></div> even if it is not displaying anything. The image to be decoded seems to be taken from this div. So if the div is too small the encoder may not be able to correctly read the code.

We use a choice of camera scan and image upload, we "secretly" enlarge the div when using scanFile().

const html5QrCode = new Html5Qrcode("reader");

// File based scanning
const fileinput = document.getElementById('qr-input-file');
fileinput.addEventListener('change', e => {
    if (e.target.files.length == 0) { return }
    const imageFile = e.target.files[0];

    // enlarge element when using file upload
    document.getElementById("reader").style.width = '1000px';

    // false does not show the image
    html5QrCode
        .scanFile(imageFile, false)
        .then(decodedText => { scanCallback(decodedText, decodedText) })
        .catch(err => { console.log(err) })
});

Source: https://github.com/mebjas/html5-qrcode/issues/410#issuecomment-1032423775

trasherdk commented 2 months ago

ping