ZBar.wasm

A webassembly build of C/C++ Zbar barcode scanning library.

• Fast. Webassembly is faster than many pure ECMAScript implementations.
• Powerful ZBar supports many kinds of barcode, includes QRCode, EAN13, CODE128...etc.
• Portability Most modern browsers and nodejs supports Webassembly.

Quick Start

Online Demo: https://zbar-wasm.github.io/demo

Quick example (nodejs):

Install:

npm i zbar.wasm

const { createCanvas, loadImage } = require('canvas');
const { scanImageData } = require('zbar.wasm');

const getImageData = async (src) => {
  const img = await loadImage(src);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
};

const url = 'https://raw.githubusercontent.com/zbar-wasm/demo/master/node/test.png';
const main = async () => {
  const img = await getImageData(url);
  const res = await scanImageData(img);
  console.log(res[0].typeName); // ZBAR_QRCODE
  console.log(res[0].decode()); // Hello World
};

main();

Quick example (deno):

import { createCanvas, loadImage } from "https://deno.land/x/canvas/mod.ts";
import { scanImageData } from "https://deno.land/x/zbar_wasm/mod.ts"

const getImageData = async (src: string) => {
  const img = await loadImage(src);
  const canvas = createCanvas(img.width(), img.height());
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width(), img.height());
};

const url = 'https://raw.githubusercontent.com/zbar-wasm/demo/master/node/test.png';
const main = async () => {
  const img = await getImageData(url);
  const res = await scanImageData(img);
  console.log(res[0].typeName); // ZBAR_QRCODE
  console.log(res[0].decode()); // Hello World
};

main();

Documentation

The full documentation for ZBar.wasm can be found on the wiki.

Note that for frontend developer who use webpack to bundle js codes, webpack file-loader is required to load the wasm binary. Some project like create-react-app already handle this for you. But if you want to use your own webpack config, remember to use file-loader for file zbar.wasm.bin. For the reason why not just use *.wasm extensions, see this issue

How to Build ZBar.wasm

ZBar.wasm use emscripten to compile C++ code into webassembly. The default Makefile use docker to provide emscripten environment. Make sure docker is accessabled by the user that running Makefile, or override the variables in Makefile to change the toolchains for building.

To build:

npm i
npm run build
npm run test