Decoding not consistent

Hi, I have a problem with the decoding of a Qr code image, that i’m passing as a base64 string to the decodeFromImage function, as following

 const codeReader = new BrowserQRCodeReader();
    codeReader.decodeFromImage(undefined, this.state.qrImage)
      .then(
        (result) => { this.showSuccessMessage('The QR is valid!'); console.log(result.getResultMetadata()); }
      )
      .catch(
        () => this.showErrorMessage('The QR is unreadable.')
      );

When I execute this code multiple times on the same image, the result is not consistent. Sometimes the decoding works and it return the correct result, but other times it throws an exception, and prints in the console the following errors

checksum or format error, trying again... Error
    at Decoder.correctErrors (Decoder.js?958e:154)
    at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
    at Decoder.decodeBitMatrix (Decoder.js?958e:70)
    at QRCodeReader.decode (QRCodeReader.js?680d:64)
    at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
    at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)

BrowserCodeReader.js?0615:233 true Error
    at Decoder.correctErrors (Decoder.js?958e:154)
    at Decoder.decodeBitMatrixParser (Decoder.js?958e:125)
    at Decoder.decodeBitMatrix (Decoder.js?958e:70)
    at QRCodeReader.decode (QRCodeReader.js?680d:64)
    at BrowserQRCodeReader.BrowserCodeReader.readerDecode (BrowserCodeReader.js?0615:254)
    at BrowserQRCodeReader.BrowserCodeReader.decodeOnce (BrowserCodeReader.js?0615:229)

I wait for an answer. Thank you

[odahcam]

I couldn’t find any very obvious errors, but I’m a little busy at the moment. I can offeryou an working example you can find in the docs:

const img = document.getElementById('img')

codeReader.decodeFromImage(img).then((result) => {
    console.log(result)
    document.getElementById('result').textContent = result.text
}).catch((err) => {
    console.error(err)
    document.getElementById('result').textContent = err
})

source: https://github.com/zxing-js/library/blob/af16fdb2a72b331394dfe22b549703bdfefcae90/docs/examples/qr-image/index.html#L1

(The demo just don’t work online, locally it works fine andyou can use it)

I see you’re using Base64 encoded images and I think that there’s really a bug in the code, that’s not that good yet. You can create your own image element and trigger the decodeOnce on image’s onload event. E.g.:

const imageElement = document.createElement('img');
imageElement.width = 200;
imageElement.height = 200;

imageElement.addEventListener('load', () => scanner.decodeFromImage(imageElement));
imageElement.src = imageUrl;

I hope that it helps.

[werthdavid]

I’m not exactly sure what kind of answer you’re expecting. The Decoder goes through a lot of steps to detect if a given image contains a valid QR-code, it seems that your code fails in the error-correction step. If you want a qualified answer it would help if you could provide the image that causes the actual problem along with information about which version of the library you used, the platform (node, browser, ionic), browser etc.