CODEWITHSUNDEEP
javascriptzxingzxing-js
user1129107
user1129107

Reputation: 225

ZXing Library will decode QR code but not barcode

I am using ZXing library to decode QR codes and barcodes in a HTML / JS environment. The following code returns a valid response with any QR code, but produces an error with regular UPC-A (or any other) barcodes.

Code is based on
https://github.com/zxing-js/library/blob/master/docs/examples/multi-image/index.html

HTML to to load the image into

<div class="imageContainer">
    <img src="">
</div>

Load libraries and JS logic
"@zxing/library": "^0.18.6"
https://github.com/zxing-js/library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/@zxing/library/umd/index.min.js"></script>
<script type="text/javascript">
    //initialize the reader
    const codeReader = new ZXing.BrowserMultiFormatReader();
    console.log('ZXing code reader initialized');

    //set, load, and send image to decoder
    var img = $('.imageContainer img')[0];
    img.onload = function () {
       console.info("Image loaded !");
       $(document).ready(function(){
        decodeBarcode(img);
       });
    };
    img.onerror = function () {
       console.error("Cannot load image");
       //do something else...
    };
    img.src = "img/test.jpg";

    //decode the image
    function decodeBarcode(img) {
        codeReader.decodeFromImage(img).then((result) => {
            console.log(result)
        })
        .catch((err) => {
            console.log(err)
        })
        console.log(`Started decode for image from ${img.src}`);
    }
</script>

Expected result for any valid barcode, but currently only works for QR codes

{
    "text": "Hello :)",
    "rawBytes": {
    },
    "numBits": 152,
    "resultPoints": [
    ],
    "format": 11,
    "timestamp": 1636657881106,
    "resultMetadata": {}
}

Actual result for UPC-A barcodes (or any barcode that is not a QR code)

R: No MultiFormat Readers were able to detect the code.
    at ir.decodeInternal (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:252678)
    at ir.decodeWithState (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:251730)
    at t.BrowserMultiFormatReader.decodeBitmap (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:288702)
    at t.BrowserMultiFormatReader.decode (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34909)
    at n (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34314)
    at https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34495
    at new Promise (<anonymous>)
    at t.BrowserMultiFormatReader.decodeOnce (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34475)
    at t.BrowserMultiFormatReader.decodeFromImageElement (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:32072)
    at t.BrowserMultiFormatReader.decodeFromImage (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:31441)

What's interesting is the same UPC-A image decodes successfully at https://zxing.org/w/decode.jspx

I have tried countless barcode variations, all of which decode successfully at the ZXing website. Regardless of the barcode, if it isn't a QR code it produces the error above. Am I missing something?

How can I use ZXing JS library to successfully decode a standard UPC-A barcode?

Upvotes: 3

Views: 7868

Answers (2)

mengyi YOENG
mengyi YOENG

Reputation: 117

processFileImg(e) {
        this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`;
        const img = document.getElementById('image');
        img.videoWidth = 0;
        this.codeReader.decodeFromImage(img).then((result) => {
          this.$emit("decode", result.text);
          this.$emit("result", result);
        }).catch((err) => {
          this.$emit("error", err);
        })
      }

Exactly worked for me!

Upvotes: 0

W.S.
W.S.

Reputation: 1515

As UPC-A is not enabled by default, you've to provide it as hints for the BrowserMultiFormatReader

const hints = new Map();
const enabledFormats = [
    // ...ALL_FORMATS_WHICH_YOU_WANT_TO_ENABLE
    ZXing.BarcodeFormat.UPC_A,
];
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, enabledFormats);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);

Available BarcodeFormats can be found here.

Upvotes: 1

Related Questions