Awesome
Building WebAssembly ZXing on Windows or Unix/Linux
The repository is based on ZXing Emscripten build.
Emscripten Installation
-
Download emsdk-portable-64bit.zip
-
Fetch the latest registry of available tools:
emsdk update -
Download and install the latest SDK tools:
emsdk install latest -
Make the "latest" SDK "active" for the current user:
emsdk activate latest -
Activate PATH and other environment variables in the current terminal:
emsdk_env
JavaScript ZXing
To build:
cd build-js- Run
configure.bat - Run
build.bat - Add the path of build-js folder to IIS.
- Open
http://localhost:2588/test.html.
To use:
<script>
var tick = function () {
if (window.ZXing) {
ZXing = ZXing();
testZXing();
} else {
setTimeout(tick, 10);
}
};
tick();
function testZXing() {
var img = new Image;
img.src = 'Qr-10.png';
img.onload = function () {
var width = Math.floor(this.width),
height = Math.floor(this.height);
var canvas = document.createElement('canvas');
canvas.style.display = 'block';
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
// ctx.rotate(Math.random()*0.1-0.05);
ctx.drawImage(this, 0, 0, width, height);
var imageData = ctx.getImageData(0, 0, width, height);
var idd = imageData.data;
document.body.appendChild(canvas);
var decodeCallback = function (ptr, len, resultIndex, resultCount) {
var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len);
window.resultString = String.fromCharCode.apply(null, result);
};
var decodePtr = ZXing.Runtime.addFunction(decodeCallback);
var image = ZXing._resize(width, height);
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
var err = ZXing._decode_qr(decodePtr);
console.log("error code", err);
console.log("result", window.resultString);
document.body.appendChild(document.createTextNode(err ? ("error: " + err) : window.resultString));
for (var k = 0; k < 50; k++) {
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr_multi(decodePtr);
err = ZXing._decode_qr(decodePtr);
}
console.time("decode QR");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr(decodePtr);
console.timeEnd("decode QR");
console.time("decode QR multi");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr_multi(decodePtr);
console.timeEnd("decode QR multi");
console.time("decode any");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_any(decodePtr);
console.timeEnd("decode any");
console.time("decode multi");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_multi(decodePtr);
console.timeEnd("decode multi");
};
};
</script>
<script async src="zxing.js"></script>
WebAssembly ZXing
To build:
cd build-wasm- Run
configure.bat - Run
build.bat - Add the path of build-wasm folder to IIS.
- Open
http://localhost:2588/test.html.
To use:
<script>
var ZXing;
var Module = {
onRuntimeInitialized: function () {
ZXing = Module;
testZXing();
}
};
function testZXing() {
var img = new Image;
img.src = 'Qr-10.png';
img.onload = function () {
var width = Math.floor(this.width),
height = Math.floor(this.height);
var canvas = document.createElement('canvas');
canvas.style.display = 'block';
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
// ctx.rotate(Math.random()*0.1-0.05);
ctx.drawImage(this, 0, 0, width, height);
var imageData = ctx.getImageData(0, 0, width, height);
var idd = imageData.data;
document.body.appendChild(canvas);
var decodeCallback = function (ptr, len, resultIndex, resultCount) {
var result = new Uint8Array(ZXing.HEAPU8.buffer, ptr, len);
window.resultString = String.fromCharCode.apply(null, result);
};
var decodePtr = ZXing.Runtime.addFunction(decodeCallback);
var image = ZXing._resize(width, height);
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
var err = ZXing._decode_qr(decodePtr);
console.log("error code", err);
console.log("result", window.resultString);
document.body.appendChild(document.createTextNode(err ? ("error: " + err) : window.resultString));
for (var k = 0; k < 50; k++) {
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr_multi(decodePtr);
err = ZXing._decode_qr(decodePtr);
}
console.time("decode QR");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr(decodePtr);
console.timeEnd("decode QR");
console.time("decode QR multi");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_qr_multi(decodePtr);
console.timeEnd("decode QR multi");
console.time("decode any");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_any(decodePtr);
console.timeEnd("decode any");
console.time("decode multi");
for (var i = 0, j = 0; i < idd.length; i += 4, j++) {
ZXing.HEAPU8[image + j] = idd[i];
}
err = ZXing._decode_multi(decodePtr);
console.timeEnd("decode multi");
};
};
</script>
<script async src="zxing.js"></script>
Performance
