I'm trying to read the barcode value from image. I used get_barcode_from_image.js file but i'm getting either "false" or "XXXXXXXXXXXXXX" value not getting the exact value.

<img id="barcode" src="barcode.png"/>
<br/>
<button onclick="alert(getBarcodeFromImage('barcode'))">Scan</button>

Any suggestions for how to get the correct value of barcode image ?

Thanks in Advance.

I'm trying to read the barcode value from image. I used get_barcode_from_image.js file but i'm getting either "false" or "XXXXXXXXXXXXXX" value not getting the exact value.

<img id="barcode" src="barcode.png"/>
<br/>
<button onclick="alert(getBarcodeFromImage('barcode'))">Scan</button>

Any suggestions for how to get the correct value of barcode image ?

Thanks in Advance.

• javascript
• jquery
• html
• barcode

• Can you show the image? – JJJ Commented Dec 27, 2013 at 13:54

3 Answers 3

Try this option, look the links.

https://github./EddieLa/BarcodeReader

Demo

I found 3 solutions:

1. QuaggaJS library (open source) for reading barcodes, all done in JavaScript.

   Supports EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, and CODABAR

   But you need to Choose Barcode type..

2. webcodecamjs Choose automatically but not supported well in Mobile.

3. this JavaScript barcode scanner also open source and free

   https://github./EddieLa/BarcodeReader

   and was the most acquired scanner (the other 2 wasn't deocode some barcodes).

   Atenntion that there is 2 changes need in JavaScript barcode scanner example for making it work:

   • remove the two require() in BarcodeReader, instead, add script tag with src pointing to the two js files: exif.js, DecoderWorker.js.

   • in exif.js, remove var before "root = this" to make root global. Otherwise, root is undefined.

   From Here

There is Scandit Barcode Scanner SDK for the Web which is a barcode recognition engine written in C++. It's piled to WebAssembly so it can run in modern browsers.

Here's a live demo that uses the web or phone camera.

There's also a client library that can be used to process one frame like this:

<img id="barcode" src="image.png">

<script src="https://unpkg./scandit-sdk"></script>
<script>
    var image = document.getElementById('barcode');

    var canvasContext = document.createElement('canvas').getContext('2d');
    canvasContext.drawImage(image, 0, 0);
    var imageData = canvasContext.getImageData(0, 0, image.width, image.height).data;

    console.log('Loading...');
    ScanditSDK.configure("xxx", {
engineLocation: "https://unpkg./scandit-sdk/build/"
    }).then(() => {
      console.log('Loaded');
      var scanner = new ScanditSDK.Scanner({
        imageSettings: {
          width: image.width,
          height: image.height,
          format: ScanditSDK.ImageSettings.Format.RGBA_8U
        },
        scanSettings: new ScanditSDK.ScanSettings({
          enabledSymbologies: [ScanditSDK.Barcode.Symbology.QR]
        })
      });
      scanner.onReady(function() {
        console.log('Ready');
        scanner.processImage(imageData)
          .then(result => console.log(result));
      });
    });
</script>

Links:

• npm
• Documentation

Disclaimer: I work for Scandit