javascript - Node.js javascript-barcode-reader 在扫描图像时给出 null

Question

我正在努力从 Node.js 中上传的图像中读取多个条形码。为此，我正在使用 javascript-barcode-reader ，需要 ImageData 作为输入。要获取图像的ImageData，我必须使用 node-canvas (因为我必须在 Nodejs 中完成这一切，而不是前端)。

下面的代码执行时没有任何警告/错误。目前，我只使用单个条形码图像，但我得到的 code 为 null。

这里出了什么问题，为什么我得到null值。

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

最初，我只尝试单个条形码图像。

Answer 1

这里有 2 个陷阱:

1. 无效使用 readFileSync带回调。
2. 在注册 img.onload 处理程序之前分配 img.src。

检查此工作示例的同步版本和 promise 版本

    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);
    })