Skip to content

Commit

Permalink
Add codecov; change version to 2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
samsam2310 committed Jun 5, 2020
1 parent ebdcd62 commit 00c9afd
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 84 deletions.
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
*.tar.gz
*.tgz
.*
src/
zbar-*/
Makefile
*.config.js
tsconfig.json
3 changes: 3 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ install:
- npm install
- make

after_success:
- bash <(curl -s https://codecov.io/bash)

deploy:
- provider: npm
email: $NPM_EMAIL
Expand Down
121 changes: 41 additions & 80 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,110 +1,71 @@
# zbar.wasm
# ZBar.wasm

[![GitHub](https://img.shields.io/github/license/samsam2310/zbar.wasm)](https://github.com/samsam2310/zbar.wasm/blob/master/LICENSE)
[![Build Status](https://travis-ci.com/samsam2310/zbar.wasm.svg?branch=master)](https://travis-ci.com/samsam2310/zbar.wasm)
[![Codecov](https://img.shields.io/codecov/c/github/samsam2310/zbar.wasm)](https://codecov.io/github/samsam2310/zbar.wasm)
[![npm version](https://badge.fury.io/js/zbar.wasm.svg)](https://www.npmjs.com/package/zbar.wasm)

A webassembly build for C/C++ Zbar bar code scan library.
Webassembly can run on many morden browser without additional support, and is faster than many pure ECMAScript implementation.
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.chino.taipei
Online Demo: https://zbar-wasm.github.io/demo

Install:
``` bash
npm install zbar.wasm
npm i zbar.wasm
```

Quick example:
Quick example (nodejs):

``` javascript
import Scanner from 'zbar.wasm';

const loadImage = async src => {
// Load image
const imgBlob = await fetch(src).then(resp => resp.blob());
const img = await createImageBitmap(imgBlob);
// Make canvas same size as image
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// Draw image onto canvas
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 {
imageData: ctx.getImageData(0, 0, img.width, img.height),
width: img.width,
height: img.height
}
}
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 () => {
// Create a sannner object
// Here use jsdelivr.net to host the wasm file,
// you can use this or use the wasm file which in the npm package.
// If you want to use this in production, remember to add the version tag.
const wasm_file_path = 'https://cdn.jsdelivr.net/npm/zbar.wasm/data/';
const scanner = await Scanner({locateFile: file => (wasm_file_path + file)});
const { imageData, width, height } = await loadImage('URL_TO_IMAGE');
const scanRes = scanner.scanQrcode(imageData.data, width, height);
if (scanRes.length > 0) {
console.log('Find Qrcode: ' + scanRes);
}
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();
```


## API
`Scanner.scanQrcode(imgData, width, height)`
#### Parameter
* imgData
A `Uint8Array` Object or something compatible, representing a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (included). See [ImageData.data](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/data).
* width
The width of the image.
* height
The height of the image.
#### Return value
A array contains decode Qrcode data strings. If nothing is found, a empty list is returned.
## Documentation

The full documentation for ZBar.wasm can be found on the [wiki](https://github.com/samsam2310/zbar.wasm/wiki).

## How to include
Note that for frontend developer who use webpack to bundle js codes, webpack [file-loader](https://webpack.js.org/loaders/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](https://github.com/webpack/webpack/issues/6725)

Although Webassembly is cross-platform and can run with browser or nodejs, on the nodejs side you may want to use native C++ Zbar instead to get better performance.

Therefore zbar.wasm is written with ES6 and recommended to load with babel + webpack.
## How to Build ZBar.wasm

The .wasm 'glue' code generated by Emscripten requires some node builtins, but won't actually use them in a web environment. Add this to webpack.config.js to ignore them when building. (Have Tested with webpack v4)
ZBar.wasm use [emscripten](https://emscripten.org/) to compile C++ code into webassembly.
The default Makefile use docker to provide emscripten environment.
Makesure docker command is accessable by the user that running Makefile.
Overwrite Makefile variable can change the toolchains for building.

To build:
``` bash
npm i
npm run build
npm run test
```
{
...
externals: {
'fs': true,
'path': true,
},
...
}
```
When initializing the scanner object, the script will try to load the `.wasm` binary file. This file `zbar.wasm` should be available through the internet (or accessable by nodejs on server side). The file can be served by CDN or use `copy-webpack-plugin`.
Scanner takes a object as argument and mix it into Webassembly Module. One usefull usage is to pass a `locateFile` function to tell all the location of the file needed by Webassembly.
For example:
``` javascript
const scanner = await Scanner({
locateFile: filename => ('https:/my.cdn.com/myproject/' + filename)
});
```
For more details, see [Demo webpack.config.js](https://github.com/samsam2310/zbar.wasm/blob/gh-pages/webpack.config.js)
2 changes: 2 additions & 0 deletions dist/.npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
*.pre
*.o
*.wast
test/
zbar-debug.*
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "zbar.wasm",
"version": "1.0.0",
"description": "A wasm build for C/C++ Zbar barcode scanning library.",
"version": "2.0.0",
"description": "A wasm build of C/C++ Zbar barcode scanning library.",
"main": "dist/index.js",
"browser": {
"./dist/load.js": "./dist/load-browser.js"
Expand All @@ -15,7 +15,7 @@
"scripts": {
"build": "make",
"format": "git diff --cached --name-only --diff-filter=ACMR \"*.ts\" \"*.js\" | sed 's| |\\ |g' | xargs prettier --write",
"test": "jest"
"test": "jest --coverage"
},
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion src/instance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const ___wasi_fd_seek = () => {
let lastGrowTimestamp = 0;
const emscripten_notify_memory_growth = (idx: number) => {
if (lastGrowTimestamp) {
console.warn('zbar.wasm: Memory Grow: ', inst!.memory.buffer.byteLength);
console.info('zbar.wasm: Memory Grow: ', inst!.memory.buffer.byteLength);
}
lastGrowTimestamp = Date.now();
HEAPU8 = new Uint8Array(inst!.memory.buffer);
Expand Down

0 comments on commit 00c9afd

Please sign in to comment.