javascriptnode.jsimage-processingqr-code

How to decode Image with multiple QR images in Javascript


I am using jsQR for decoding and Jimp for making the Bitmap data from the given image. when I do try an image with single QR code jsQR it is giving the decoded value. But image with two QR codes, it is returning null. So How can we do decode the image which is having two QR images?

Thanks for the future response :)


Solution

  • This is actually quite a complicated problem. If you examine the jsQR code, in src/locater/index.ts, you will find the function:

    export function locate(matrix: BitMatrix): QRLocation { ...
    

    This function performs the logic that searches for the three corner squares of a valid QR code.

    qr code corners

    Clearly, if your image contains two qr codes, then there will be at least 6 (ignoring partials) corner features within the image, causing the locate function to make an error, and the subsequent decoding to fail.

    In order to handle multiple QR codes within a single image, you will need to create a function that is able to find QR code subimages within a single image, and extract those as individual images to process. In other words, you will need to figure out how to crop the image into two QR codes, and process each one individually (unless you are able to find a library that is able to perform this process).

    If you look at the first part of the locate function, you will see that it searches the entire image, looking for MAX_FINDERPATTERNS_TO_SEARCH instances of the corner quad feature (currently set to 4, hence the error in decoding).

    You could copy this code, and build a list of all found quads within an image, and look at their spatial relationships to determine if > 4 quads are found, where are the best places to crop the image correctly would be.