Qr Grid Core

This package serves as the foundational component for encoding QR codes, utilized by all other qrgrid packages. For maximum customization and full control over QR code generation, it is recommended to use this core package directly.

[!NOTE] For complete documentation visit: qrgrid.dev

Installation

All the qrgrid packages are available through npm

# npm
npm i @qrgrid/core

Usage

The QR constructor expects two parameters:

• inputData (string): The input string to encode in the QR code.
• options (QrOptions): Optional settings for QR code generation.

QR(
inputData: string,
options?: QrOptions,
)
// where QrOptions is:
type QrOptions = {errorCorrection?: keyof typeof ErrorCorrectionLevel};
// where ErrorCorrectionLevel is:
enum ErrorCorrectionLevel {
  L = "L",
  M = "M",
  Q = "Q",
  H = "H",
}

The QR class has the following public properties

// QR Properties
{
  inputData: string; // input data passed in the constructor
  segments: Segments; // segments of the input data to make the qr
  data: Uint8Array; // qr data in 1's and 0's representing the dark and light module of qr
  gridSize: number; // modules in qr ex: 21 represents 21 x 21 for version 1
  version: number; // qr version
  errorCorrection: ErrorCorrectionLevel; // errorCorrection used
  reservedBits: { [key: number]: { type: ReservedBits; dark: boolean } }; // reserved bits used
  maskPattern: number; // mask pattern used
}
// where
type Segments = Array<{ value: string; mode: Mode }>;
enum Mode {
  Numeric = "Numeric",
  AlphaNumeric = "AlphaNumeric",
  Byte = "Byte",
  Kanji = "Kanji",
}

Example

Implementing in a web project using canvas

import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!")

// get the canvas element
const canvas = document.getElementById("defaultQrCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;
const canvasSize = 400;
// calculate module size and adjusting canvas to height and wight 
let size = Math.floor(canvasSize / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - canvasSize) + size * 2;
canvas.height = canvasSize + border;
canvas.width = canvasSize + border;
// module color
ctx.fillStyle = "white";
// placing each modules in x,y position in the canvas using fillRect
let x = size;
let y = size;
for (let i = 0; i < qr.data.length; i++) {
  const bit = qr.data[i];
  if (bit) {
    ctx.fillRect(x, y, size, size);
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}
// background color (optional)
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvasSize + border, canvasSize + border);