QRCode

A pure JavaScript QRCode encode and decode library.

QRCode guide and example

QRCode guide

QRCode encode example

QRCode decode example

Usage

Common Interface

1export class Charset {
2  public static readonly CP437: Charset;
3  public static readonly ISO_8859_1: Charset;
4  public static readonly ISO_8859_2: Charset;
5  public static readonly ISO_8859_3: Charset;
6  public static readonly ISO_8859_4: Charset;
7  public static readonly ISO_8859_5: Charset;
8  public static readonly ISO_8859_6: Charset;
9  public static readonly ISO_8859_7: Charset;
10  public static readonly ISO_8859_8: Charset;
11  public static readonly ISO_8859_9: Charset;
12  public static readonly ISO_8859_10: Charset;
13  public static readonly ISO_8859_11: Charset;
14  public static readonly ISO_8859_13: Charset;
15  public static readonly ISO_8859_14: Charset;
16  public static readonly ISO_8859_15: Charset;
17  public static readonly ISO_8859_16: Charset;
18  public static readonly SHIFT_JIS: Charset;
19  public static readonly CP1250: Charset;
20  public static readonly CP1251: Charset;
21  public static readonly CP1252: Charset;
22  public static readonly CP1256: Charset;
23  public static readonly UTF_16BE: Charset;
24  public static readonly UTF_8: Charset;
25  public static readonly ASCII: Charset;
26  public static readonly BIG5: Charset;
27  public static readonly GB2312: Charset;
28  public static readonly EUC_KR: Charset;
29  public static readonly GBK: Charset;
30  public static readonly GB18030: Charset;
31  public static readonly UTF_16LE: Charset;
32  public static readonly UTF_32BE: Charset;
33  public static readonly UTF_32LE: Charset;
34  public static readonly ISO_646_INV: Charset;
35  public static readonly BINARY: Charset;
36  public constructor(label: string, ...values: number[]);
37}
38
39declare type FNC1 = [mode: 'GS1'] | [mode: 'AIM', indicator: number];

Encoder Interface

1export class Alphanumeric {
2  public constructor(content: string);
3}
4
5export class Byte {
6  public constructor(content: string, charset?: Charset);
7}
8
9export class Hanzi {
10  public constructor(content: string);
11}
12
13export class Kanji {
14  public constructor(content: string);
15}
16
17export class Numeric {
18  public constructor(content: string);
19}
20
21export interface EncoderOptions {
22  hints?: { fnc1?: FNC1 };
23  version?: 'Auto' | number;
24  level?: 'L' | 'M' | 'Q' | 'H';
25  encode?: (content: string, charset: Charset) => Uint8Array;
26}
27
28declare interface DataURLOptions {
29  margin?: number;
30  foreground?: [R: number, G: number, B: number];
31  background?: [R: number, G: number, B: number];
32}
33
34export class Encoded {
35  public size: number;
36  public mask: number;
37  public level: string;
38  public version: number;
39  public get(x: number, y: number): number;
40  public toDataURL(moduleSize: number, options?: DataURLOptions): string;
41}
42
43export class Encoder {
44  public constructor(options?: EncoderOptions);
45  public encode(...segments: (Alphanumeric | Byte | Hanzi | Kanji | Numeric)[]): Encoded;
46}

Encoder Example

1import { Byte, Encoder, Hanzi, Kanji } from '@nuintun/qrcode';
2
3const encoder = new Encoder({
4  level: 'H'
5});
6
7const qrcode = encoder.encode(
8  // Hanzi
9  new Hanzi('你好世界'),
10  // Byte
11  new Byte('\nhello world\n'),
12  // Kanji
13  new Kanji('こんにちは世界')
14);
15
16console.log(qrcode.toDataURL());

Decoder Interface

1export class BitMatrix {
2  public constructor(width: number, height: number, bits?: Int32Array);
3  public get width(): number;
4  public get height(): number;
5  public set(x: number, y: number): void;
6  public get(x: number, y: number): number;
7  public flip(): void;
8  public flip(x: number, y: number): void;
9  public clone(): BitMatrix;
10  public setRegion(left: number, top: number, width: number, height: number): void;
11}
12
13export class Point {
14  public get x(): number;
15  public get y(): number;
16}
17
18export class Pattern extends Point {
19  public get moduleSize(): number;
20}
21
22declare class FinderPatternGroup {
23  public get topLeft(): Pattern;
24  public get topRight(): Pattern;
25  public get bottomLeft(): Pattern;
26}
27
28export class Detected {
29  public get matrix(): BitMatrix;
30  public get finder(): FinderPatternGroup;
31  public get alignment(): Pattern | undefined;
32  public get size(): number;
33  public get moduleSize(): number;
34  public mapping(x: number, y: number): Point;
35}
36
37declare interface Structured {
38  readonly index: number;
39  readonly count: number;
40  readonly parity: number;
41}
42
43export class Decoded {
44  public get mask(): number;
45  public get level(): string;
46  public get version(): number;
47  public get mirror(): boolean;
48  public get content(): string;
49  public get corrected(): number;
50  public get symbology(): string;
51  public get fnc1(): FNC1 | false;
52  public get codewords(): Uint8Array;
53  public get structured(): Structured | false;
54}
55
56export function grayscale(imageData: ImageData): Uint8Array;
57
58export function binarize(luminances: Uint8Array, width: number, height: number): BitMatrix;
59
60export interface DetectorOptions {
61  strict?: boolean;
62}
63
64export class Detector {
65  public constructor(options?: DetectorOptions);
66  public detect(binarized: BitMatrix): Generator<Detected, void, boolean>;
67}
68
69export interface DecoderOptions {
70  decode?: (bytes: Uint8Array, charset: Charset) => string;
71}
72
73export class Decoder {
74  public constructor(options?: DecoderOptions);
75  public decode(matrix: BitMatrix): Decoded;
76}

Decoder Example

1import { binarize, Decoder, Detector, grayscale } from '@nuintun/qrcode';
2
3const image = new Image();
4
5image.crossOrigin = 'anonymous';
6
7image.addEventListener('error', () => {
8  console.error('image load error');
9});
10
11image.addEventListener('load', () => {
12  const { width, height } = image;
13  const canvas = new OffscreenCanvas(width, height);
14  const context = canvas.getContext('2d')!;
15
16  context.drawImage(image, 0, 0);
17
18  const luminances = grayscale(context.getImageData(0, 0, width, height));
19  const binarized = binarize(luminances, width, height);
20  const detector = new Detector();
21  const detected = detector.detect(binarized);
22  const decoder = new Decoder();
23
24  let current = detected.next();
25
26  while (!current.done) {
27    let succeed = false;
28
29    const detect = current.value;
30
31    try {
32      const { size, finder, alignment } = detect;
33      const decoded = decoder.decode(detect.matrix);
34      // Finder
35      const { topLeft, topRight, bottomLeft } = finder;
36      // Corners
37      const topLeftCorner = detect.mapping(0, 0);
38      const topRightCorner = detect.mapping(size, 0);
39      const bottomRightCorner = detect.mapping(size, size);
40      const bottomLeftCorner = detect.mapping(0, size);
41      // Timing
42      const topLeftTiming = detect.mapping(6.5, 6.5);
43      const topRightTiming = detect.mapping(size - 6.5, 6.5);
44      const bottomLeftTiming = detect.mapping(6.5, size - 6.5);
45
46      console.log({
47        content: decoded.content,
48        finder: [topLeft, topRight, bottomLeft],
49        alignment: alignment ? alignment : null,
50        timing: [topLeftTiming, topRightTiming, bottomLeftTiming],
51        corners: [topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner]
52      });
53
54      succeed = true;
55    } catch {
56      // Decode failed, skipping...
57    }
58
59    // Notice: pass succeed to next() is very important,
60    // This can significantly reduce the number of detections.
61    current = detected.next(succeed);
62  }
63});
64
65image.src = 'https://nuintun.github.io/qrcode/packages/examples/src/images/qrcode.jpg';

Links

zxing/zxing

zxing-cpp/zxing-cpp