Skip to content
ZXing WebAssembly Library
C++ C CMake HTML JavaScript Makefile
Branch: master
Clone or download
Pull request Compare This branch is 9 commits ahead, 2 commits behind kig:master.
yushulx Merge pull request #1 from mdchaney/master
Minor changes for Emscripten 1.38.31.
Latest commit e2d2576 May 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build-js
build-wasm Added sample web worker. May 21, 2019
build return points from QR Detector Nov 25, 2015
cli/src Update ImageReaderSource.cpp Jul 10, 2015
cmake Initial commit Dec 16, 2014
core
emscripten Showing possible alternate setups. May 21, 2019
examples Fixed the display issue for iPhone. Sep 3, 2018
.gitignore
AUTHORS Initial commit Dec 16, 2014
CMakeLists.txt return points from QR Detector Nov 25, 2015
COPYING
NOTICE Initial commit Dec 16, 2014
README.md Added Unix/Linux to README. May 21, 2019

README.md

Building WebAssembly ZXing on Windows or Unix/Linux

The repository is based on ZXing Emscripten build.

Emscripten Installation

  1. Download emsdk-portable-64bit.zip

  2. Fetch the latest registry of available tools:

    emsdk update
    
  3. Download and install the latest SDK tools:

    emsdk install latest
    
  4. Make the "latest" SDK "active" for the current user:

    emsdk activate latest
    
  5. Activate PATH and other environment variables in the current terminal:

    emsdk_env
    

JavaScript ZXing

To build:

  1. cd build-js
  2. Run configure.bat
  3. Run build.bat
  4. Add the path of build-js folder to IIS.
  5. 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:

  1. cd build-wasm
  2. Run configure.bat
  3. Run build.bat
  4. Add the path of build-wasm folder to IIS.
  5. 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

JavaScript ZXing vs WebAssembly ZXing

Blog

You can’t perform that action at this time.