Node.js javascript-barcode-reader gives null on scanning image

Question

I am working on reading multiple barcodes, from uploaded images in node.js. For that I am using javascript-barcode-reader, which needs ImageData as input. to get ImageData of an image, I had to make use of node-canvas (as I have to do it all in Nodejs, not front-end).

bellow code executes without any warning/error. Currently, I am only using a single barcode image, but I am getting code as null.

what is going wrong here, why I am getting null value.

const Canvas = require('canvas');
const javascriptBarcodeReader = require('javascript-barcode-reader');

var filepath = './images/Code-2of5.jpg';
var buf = fs.readFileSync(filepath);
var canvas = new Canvas(640, 480);
var Image = Canvas.Image;
var ctx = canvas.getContext('2d');

fs.readFileSync(filepath, function (err, squid) {
    if (err) throw err;
    let img = new Image;
    img.src = squid;
    img.onload = function () {
        ctx.drawImage(img, 0, 0, 640, 480);
    }
});

let imgData = ctx.getImageData(0, 0, 640, 480);
const code = javascriptBarcodeReader(imgData /* ImageData */ , { 
    barcode: 'code-2of5', // 'code-128'
    type: 'interleaved', //standard/interleaved optional type
});

console.log(code); // output as null

Initially, I am trying out for only single barcode image.

can you share your image also? – omurbek Oct 12 '18 at 08:41 — omurbek, Oct 12 '18 at 08:41

score 1 · Answer 1 · answered Oct 12 '18 at 11:06

there are 2 gotchas here:

invalid usage readFileSync with callback.
assigning img.src before register img.onload handler.

check this working example both sync and promisified version

    const fs = require('fs');
    const Canvas = require('canvas');
    const javascriptBarcodeReader = require('javascript-barcode-reader');

    function readBarCodeSync(imagePath) {
      const canvas = new Canvas(640, 480);
      const Image = Canvas.Image;
      const ctx = canvas.getContext('2d');

      const img = new Image;
      img.onload = function () {
        ctx.drawImage(img, 0, 0, 640, 480);
      }
      img.src = fs.readFileSync(imagePath);

      const imgData = ctx.getImageData(0, 0, 640, 480);
      const code = javascriptBarcodeReader(imgData /* ImageData */ , {
        barcode: 'code-2of5', // 'code-128'
        type: 'interleaved', //standard/interleaved optional type
      });

      return code;
    }

    function readBarCode (imagePath) {
      const canvas = new Canvas(640, 480);
      const Image = Canvas.Image;
      const ctx = canvas.getContext('2d');

      const img = new Image;
      img.onload = function () {
        ctx.drawImage(img, 0, 0, 640, 480);
      }
      return new Promise((resolve,reject)=>{
        fs.readFile(imagePath,(err,buf)=>{
          if(err) return reject(err);
          img.src = buf;
          const imgData = ctx.getImageData(0, 0, 640, 480);
          const code = javascriptBarcodeReader(imgData /* ImageData */ , {
            barcode: 'code-2of5', // 'code-128'
            type: 'interleaved', //standard/interleaved optional type
          });
          resolve(code);
        });
      });
    }

    var imagePath = './images/Code-2of5.jpg';

    console.log('sync version', readBarCodeSync(imagePath))
    readBarCode(imagePath)
    .then(barCode=>{
      console.log('async version', barCode);
    })
    .catch(err=>{
      console.error(err);
    })

I am still getting *null*, printed value of `buf` but `imgData` gives all 0. — Nikhil Kinkar, Oct 12 '18 at 11:45
the above example gives ` sync version 1520152015201520 async version 1520152015201520 ` are you sure you applied the same logic? — Mohammed Essehemy, Oct 12 '18 at 12:03
what version of javascript-barcode-reader did you tried on, there is version updated on the same day, I asked question and you answered. I was using (V0.3.1). — Nikhil Kinkar, Oct 15 '18 at 05:08

Node.js javascript-barcode-reader gives null on scanning image

1 Answers1