Awesome
WebAssembly ZXing
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
