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

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  // Notice: the detect result are possible combinations of QR Code regions,
22  // which may not necessarily be successfully decoded.
23  const detected = detector.detect(binarized);
24  const decoder = new Decoder();
25
26  let current = detected.next();
27
28  while (!current.done) {
29    let succeed = false;
30
31    const detect = current.value;
32
33    try {
34      const { size, finder, alignment } = detect;
35      const decoded = decoder.decode(detect.matrix);
36      // Finder
37      const { topLeft, topRight, bottomLeft } = finder;
38      // Corners
39      const topLeftCorner = detect.mapping(0, 0);
40      const topRightCorner = detect.mapping(size, 0);
41      const bottomRightCorner = detect.mapping(size, size);
42      const bottomLeftCorner = detect.mapping(0, size);
43      // Timing
44      const topLeftTiming = detect.mapping(6.5, 6.5);
45      const topRightTiming = detect.mapping(size - 6.5, 6.5);
46      const bottomLeftTiming = detect.mapping(6.5, size - 6.5);
47
48      console.log({
49        content: decoded.content,
50        finder: [topLeft, topRight, bottomLeft],
51        alignment: alignment ? alignment : null,
52        timing: [topLeftTiming, topRightTiming, bottomLeftTiming],
53        corners: [topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner]
54      });
55
56      succeed = true;
57    } catch {
58      // Decode failed, skipping...
59    }
60
61    // Notice: pass succeed to next() is very important,
62    // this can significantly reduce the number of detections.
63    current = detected.next(succeed);
64  }
65});
66
67image.src = 'https://nuintun.github.io/qrcode/public/images/qrcode.jpg';

Links

zxing/zxing

zxing-cpp/zxing-cpp