-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ebdcd62
commit 00c9afd
Showing
6 changed files
with
52 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,8 @@ | ||
*.tar.gz | ||
*.tgz | ||
.* | ||
src/ | ||
zbar-*/ | ||
Makefile | ||
*.config.js | ||
tsconfig.json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,110 +1,71 @@ | ||
# zbar.wasm | ||
# ZBar.wasm | ||
|
||
[](https://github.com/samsam2310/zbar.wasm/blob/master/LICENSE) | ||
[](https://travis-ci.com/samsam2310/zbar.wasm) | ||
[](https://codecov.io/github/samsam2310/zbar.wasm) | ||
[](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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,5 @@ | |
*.pre | ||
*.o | ||
*.wast | ||
test/ | ||
zbar-debug.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters