qr-scanner

Javascript QR Code Scanner based on Lazar Lazslos javascript port of Googles ZXing library.

In this library, several improvements have been applied over the original port:

  • This library uses an improved binarizer for transforming color input images into black and white images in the preprocessing step which makes it more tolerant to shades and reflections on the screen.

  • The qr scanner can be configured for better performance on colored QR codes.

  • The scanner runs in a WebWorker which keeps the main / UI thread responsive.

  • The library was changed to be compatible with Googles closure compiler and compiled to just ~33.7 kb of javascript (~12 kb gzipped).

  • Work on higher resolution pictures by default.

Usage

You can either use the ready to use UI (index.html + qr-scanner.js + qr-scanner-wroker.min.js, based on the lightweight X-Element frontend framework) or use just the qr-scanner-wroker.min.js Webworker as follows:

Create a new Worker:

const qrWorker = new Worker('/path/to/qr-scanner-worker.min.js');

Send ImageData to the worker:

qrWorker.postMessage({
    type: 'decode',
    data: imageData
}, [imageData.data.buffer]);

Handle the result from the qr worker:

qrWorker.addEventListener('message', event => {
  const type = event.data.type;
  const data = event.data.data;
  if (type === 'qrResult') {
      if (data !== null) {
          alert(data);
      }
  }
});

Change the weights for red, green and blue in the grayscale computation to improve contrast for QR codes of a specific color:

qrWorker.postMessage({
    type: 'grayscaleWeights',
    data: {
        red: redWeight,
        green: greenWeight,
        blue: blueWeight
    }
});

To enable debug mode:

qrWorker.postMessage({
    type: 'setDebug',
    data: true
});

To handle the debug image:

qrWorker.addEventListener('message', event => {
  const type = event.data.type;
  const data = event.data.data;
  if (type === 'debugImage') {
      canvasContext.putImageData(data, 0, 0);
  }
});

Building the project

The project is prebuild in qr-scanner-worker.min.js. Building yourself is only neccessary if you wanna change the code in the /src folder. Nodejs and Java are required prequesites for building.

Install required build packages:

npm install

Building:

gulp build
S
Description
Lightweight Javascript QR Code Scanner
Readme MIT
3 MiB
Languages
TypeScript 93.5%
JavaScript 6.5%