Fix #7: use the native TextDecoder for QR codes, add more QR tests

Author: undecaf

Makefile

@@ -14,13 +14,17 @@ EM_OPTS = --rm -w /$(SRC) -v $$PWD:/$(SRC) emscripten/emsdk:$(EM_VERSION)
 EM_DOCKER = docker run -u $(shell id -u):$(shell id -g) $(EM_OPTS)
 EM_PODMAN = podman run $(EM_OPTS)
 EM_ENGINE = $(EM_DOCKER)
+
+# See https://emscripten.org/docs/tools_reference/emcc.html
 EMCC = $(EM_ENGINE) emcc
 EMMAKE = $(EM_ENGINE) emmake
 EMCONFIG = $(EM_ENGINE) emconfigure
 
 ZBAR_DEPS = $(ZBAR_SRC)/make.done
 ZBAR_OBJS = $(ZBAR_SRC)/zbar/*.o $(ZBAR_SRC)/zbar/*/*.o
 ZBAR_INC = -I $(ZBAR_SRC)/include/ -I $(ZBAR_SRC)/
+
+# See https://github.com/emscripten-core/emscripten/blob/main/src/settings.js
 EMCC_FLAGS = -Oz -Wall -Werror -s ALLOW_MEMORY_GROWTH=1 \
 	-s EXPORTED_FUNCTIONS="['_malloc','_free']" \
 	-s MODULARIZE=1 -s EXPORT_NAME=zbarWasm

README.md

@@ -52,7 +52,7 @@ An example that scans a static image file:
   <pre id="result"></pre>
 
   <script type="module">
-    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/[email protected].13/dist/main.js'
+    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/[email protected].14/dist/main.js'
 
     (async () => {
       const
@@ -86,15 +86,15 @@ Almost identical to the snippet above, just replace the lines
 ```html
     ⁝
   <script type="module">
-    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/[email protected].13/dist/main.js'
+    import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/[email protected].14/dist/main.js'
     ⁝
 ```
 
 with
 
 ```html
     ⁝
-  <script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected].13/dist/index.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected].14/dist/index.js"></script>
   <script>
     ⁝
 ```
@@ -105,9 +105,9 @@ with
 Installing:
 
 ```shell script
-$ npm install @undecaf/zbar-wasm@0.9.13
+$ npm install @undecaf/zbar-wasm@0.9.14
     or
-$ yarn add @undecaf/zbar-wasm@0.9.13
+$ yarn add @undecaf/zbar-wasm@0.9.14
 ```
 
 Using:

docs/example/index.html

@@ -63,7 +63,7 @@ <h5>Result</h5>
   </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected].13/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected].14/dist/index.js"></script>
 <script src="js/main.js"></script>
 
 </body>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undecaf/zbar-wasm",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "description": "A WebAssembly build of the C/C++ ZBar barcode reader",
   "type": "module",
   "main": "./dist/main.cjs",
@@ -50,5 +50,8 @@
     "rollup-plugin-ts": "^2.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.3"
+  },
+  "dependencies": {
+    "jschardet": "^3.0.0"
   }
 }

package.json

@@ -1,18 +1,26 @@
 import { ZBarImage } from './ZBarImage';
 import { ZBarScanner } from './ZBarScanner';
 import { ZBarSymbol } from './ZBarSymbol';
+import { ZBarConfigType, ZBarSymbolType } from './enum';
 
-const defaultScannerPromise = ZBarScanner.create();
+// Returns a new ZBarScanner instance that delegates QR code text decoding
+// to the native TextDecoder (fixes #7: Issue with utf-8)
 export const getDefaultScanner = async () => {
-  return await defaultScannerPromise;
+  const scanner = await ZBarScanner.create();
+  scanner.setConfig(ZBarSymbolType.ZBAR_NONE, ZBarConfigType.ZBAR_CFG_BINARY, 1);
+  return scanner;
 };
 
+let defaultScanner: ZBarScanner;
+
 const scanImage = async (
   image: ZBarImage,
   scanner?: ZBarScanner
 ): Promise<Array<ZBarSymbol>> => {
   if (scanner === undefined) {
-    scanner = await defaultScannerPromise;
+    // Create the default scanner lazily
+    scanner = defaultScanner || await getDefaultScanner();
+    defaultScanner = scanner;
   }
   const res = scanner.scan(image);
   if (res < 0) {

src/module.ts

@@ -1,12 +1,14 @@
 import { ImageFile, imageFiles } from './imageFiles';
-import { ZBarImage, ZBarScanner } from '../dist/main.cjs';
+import { getDefaultScanner, scanImageData } from '../dist/main.cjs';
 
-const singleBarcodes =
-  [ 'codabar', 'code_39', 'code_93', 'code_128', 'databar', 'ean_13', 'itf', 'qr_code', 'qr_code-200mb' ];
+const singleBarcodes = [
+  'codabar', 'code_39', 'code_93', 'code_128', 'databar', 'ean_13', 'itf',
+  'qr_code', 'qr_code-200mb', 'qr_code-utf-8-1', 'qr_code-utf-8-2',
+];
 
 
 test('ZBarScanner created', async () => {
-  const scanner = await ZBarScanner.create();
+  const scanner = await getDefaultScanner();
 
   expect(scanner).toBeDefined();
   expect(scanner.getPointer()).toBeGreaterThan(0);
@@ -19,22 +21,16 @@ singleBarcodes.forEach(basename => {
   test('ZBarScanner scanning', async () => {
     const imageFile: ImageFile = imageFiles[basename];
     const imageData: ImageData = await imageFile.loadImageData();
-    const image: ZBarImage = await ZBarImage.createFromRGBABuffer(imageData.width, imageData.height, imageData.data);
 
-    const scanner = await ZBarScanner.create();
-    scanner.scan(image);
-    const symbols = scanner.getResults();
+    const symbols = await scanImageData(imageData);
 
     imageFile.expect(symbols);
-
-    image.destroy();
-    scanner.destroy();
   });
 });
 
 
 test('ZBarScanner destroyed', async () => {
-  const scanner = await ZBarScanner.create();
+  const scanner = await getDefaultScanner();
 
   scanner.destroy();
 

test/ZBarScanner.test.ts

@@ -8,32 +8,32 @@ class ExpectedSymbol {
     readonly decoded: string;
     readonly orientation: ZBarOrientation;
     readonly points?: Array<{ x: number, y: number }>;
-  
+
     constructor(
-      type: ZBarSymbolType, 
-      decoded: string, 
-      orientation: ZBarOrientation, 
+      type: ZBarSymbolType,
+      decoded: string,
+      orientation: ZBarOrientation,
       points?: Array<{ x: number, y: number }>
     ) {
       this.type = type;
       this.decoded = decoded;
       this.orientation = orientation;
       this.points = points;
     }
-  
+
   }
-  
-  
+
+
   export class ImageFile {
-  
+
     readonly path: string;
     readonly expectedSymbols: Array<ExpectedSymbol>;
-  
+
     constructor(basename: string, expectedSymbols: Array<ExpectedSymbol>) {
       this.path = `${__dirname}/../test/img/${basename}.png`;
       this.expectedSymbols = expectedSymbols;
     }
-  
+
     async loadImageData(): Promise<ImageData> {
         const image = await loadImage(this.path);
         const canvas = createCanvas(image.width, image.height);
@@ -77,8 +77,8 @@ class ExpectedSymbol {
         expect(symbols).toHaveLength(this.expectedSymbols.length);
     }
   }
-  
-  
+
+
 export const imageFiles: Record<string, ImageFile> = {
   'codabar':
     new ImageFile(
@@ -177,4 +177,40 @@ export const imageFiles: Record<string, ImageFile> = {
         )
       ]
     ),
+
+  'qr_code-utf-8-1':
+    new ImageFile(
+      'qr_code-utf-8-1',
+      [
+        new ExpectedSymbol(
+          ZBarSymbolType.ZBAR_QRCODE,
+          'ÄÖÜ äöü ß ÁÉÍÓÚ áéíóú ÀÈÌÒÙ àéíóú',
+          ZBarOrientation.ZBAR_ORIENT_UP,
+          [
+            { x: 10, y: 10 },
+            { x: 10, y: 156 },
+            { x: 156, y: 156 },
+            { x: 156, y: 10 }
+          ]
+        )
+      ]
+    ),
+
+  'qr_code-utf-8-2':
+    new ImageFile(
+      'qr_code-utf-8-2',
+      [
+        new ExpectedSymbol(
+          ZBarSymbolType.ZBAR_QRCODE,
+          'Thôn Hoan Trung, Chiến Thắng, Bắc Sơn, Lạng Sơn',
+          ZBarOrientation.ZBAR_ORIENT_UP,
+          [
+            { x: 26, y: 26 },
+            { x: 26, y: 283 },
+            { x: 282, y: 284 },
+            { x: 281, y: 26 }
+          ]
+        )
+      ]
+    ),
 };