WebAssembly ZXing
May 25, 2019 ยท View on GitHub
With big thanks to Xiao Ling for sorting out the Windows build and WebAssembly build process in WebAssembly ZXing Windows Build fork
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 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();
var res = ZXing._decode_results[0];
var resultString = '';
if (res) {
resultString = String.fromCharCode.apply(null, res[0]);
ctx.beginPath();
ctx.moveTo(res[1], res[2]);
ctx.lineTo(res[3], res[4]);
ctx.lineTo(res[5], res[6]);
ctx.lineTo(res[7], res[8]);
ctx.closePath();
ctx.lineWidth = 4;
ctx.strokeStyle = 'red';
ctx.stroke();
console.log("result", resultString);
}
document.body.appendChild(document.createTextNode(err ? ("error: " + err) : 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();
err = ZXing._decode_qr();
}
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();
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();
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();
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();
console.timeEnd("decode multi");
};
};
</script>
<script async src="zxing.js"></script>
WebAssembly ZXing
Windows 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.
Linux / OSX build:
cd build-wasmcp CMakeLists.txt ..3.emconfigure cmake ..4.emmake make -j85.serve6. Openhttp://localhost:5000/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 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();
var res = ZXing._decode_results[0];
var resultString = '';
if (res) {
resultString = String.fromCharCode.apply(null, res[0]);
ctx.beginPath();
ctx.moveTo(res[1], res[2]);
ctx.lineTo(res[3], res[4]);
ctx.lineTo(res[5], res[6]);
ctx.lineTo(res[7], res[8]);
ctx.closePath();
ctx.lineWidth = 4;
ctx.strokeStyle = 'red';
ctx.stroke();
console.log("result", resultString);
}
document.body.appendChild(document.createTextNode(err ? ("error: " + err) : 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();
err = ZXing._decode_qr();
}
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();
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();
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();
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();
console.timeEnd("decode multi");
};
};
</script>
<script async src="zxing.js"></script>
Performance
