@juit/qrcode 0.0.0

package/dist/utils/merge.mjs

@@ -0,0 +1,16 @@
+// utils/merge.ts
+function mergeArrays(...arrays) {
+  const chunks = [];
+  const size = arrays.reduce((size2, array) => {
+    chunks.push([size2, array]);
+    return size2 + array.length;
+  }, 0);
+  const result = new Uint8Array(size);
+  for (const [offset, array] of chunks)
+    result.set(array, offset);
+  return result;
+}
+export {
+  mergeArrays
+};
+//# sourceMappingURL=merge.mjs.map

package/dist/utils/merge.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/merge.ts"],
+  "mappings": ";AACO,SAAS,eAAe,QAAkC;AAC/D,QAAM,SAAkD,CAAC;AAEzD,QAAM,OAAO,OAAO,OAAO,CAACA,OAAM,UAAU;AAC1C,WAAO,KAAK,CAAEA,OAAM,KAAM,CAAC;AAC3B,WAAOA,QAAO,MAAM;AAAA,EACtB,GAAG,CAAC;AAEJ,QAAM,SAAS,IAAI,WAAW,IAAI;AAClC,aAAW,CAAE,QAAQ,KAAM,KAAK;AAAQ,WAAO,IAAI,OAAO,MAAM;AAChE,SAAO;AACT;",
+  "names": ["size"]
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@juit/qrcode",
+  "version": "0.0.0",
+  "description": "A modern QR code generator for JavaScript",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "plug",
+    "coverage": "plug coverage",
+    "dev": "plug coverage -w src -w test",
+    "lint": "plug lint",
+    "test": "plug test",
+    "transpile": "plug transpile"
+  },
+  "author": "Juit Developers <developers@juit.com>",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@plugjs/build": "^0.5.36",
+    "@types/pdfkit": "^0.13.4",
+    "fast-png": "^6.2.0",
+    "pdfkit": "^0.15.0"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/juitnow/juit-qrcode.git"
+  },
+  "keywords": [
+    "qrcode",
+    "qr code",
+    "qr",
+    "png",
+    "svg",
+    "pdf",
+    "image"
+  ],
+  "bugs": {
+    "url": "https://github.com/juitnow/juit-qrcode/issues"
+  },
+  "homepage": "https://github.com/juitnow/juit-qrcode#readme",
+  "files": [
+    "*.md",
+    "dist/",
+    "src/"
+  ]
+}

package/src/encode.ts

@@ -0,0 +1,180 @@
+/* ========================================================================== *
+ * TYPES                                                                      *
+ * ========================================================================== */
+
+/** Internal interface for encoding data */
+export interface QrCodeMessage {
+  /** Data for QR code version 27 or greater */
+  data27: boolean[],
+  /** Data for QR code version 10 or greater (shorter) */
+  data10?: boolean[],
+  /** Data for QR code version 1 or greater (shortest) */
+  data1?: boolean[],
+}
+
+/* ========================================================================== *
+ * CONSTANTS                                                                  *
+ * ========================================================================== */
+
+// Index for alphanumeric characters
+const ALPHANUM: Record<string, number> = (function(s) {
+  const res: Record<string, number> = {}
+  for (let i = 0; i < s.length; i++) {
+    res[s[i]!] = i
+  }
+  return res
+})('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:')
+
+/* ========================================================================== *
+ * INTERNALS                                                                  *
+ * ========================================================================== */
+
+// Bush a number into a binary array (that is, 1s or 0s)
+function pushBits(arr: boolean[], n: number, value: number): boolean[] {
+  for (let bit = 1 << (n - 1); bit; bit = bit >>> 1) {
+    arr.push(!! (bit & value))
+  }
+  return arr
+}
+
+// Encode binary data
+function binaryEncode(data: Uint8Array): QrCodeMessage {
+  const len = data.length
+  const bits: boolean[] = []
+
+  for (let i = 0; i < len; i++) {
+    pushBits(bits, 8, data[i]!)
+  }
+
+  const d = pushBits([ false, true, false, false ], 16, len)
+
+  const res: QrCodeMessage = {
+    data27: d.concat(bits),
+  }
+  res.data10 = res.data27
+
+  if (len < 256) {
+    const d = pushBits([ false, true, false, false ], 8, len)
+    res.data1 = d.concat(bits)
+  }
+
+  return res
+}
+
+// Encode alphanumeric data
+function alphanumEncode(str: string): QrCodeMessage {
+  const len = str.length
+  const bits: boolean[] = []
+
+  for (let i = 0; i < len; i += 2) {
+    let b = 6
+    let n = ALPHANUM[str[i]!]!
+    if (str[i+1]) {
+      b = 11
+      n = n * 45 + ALPHANUM[str[i+1]!]!
+    }
+    pushBits(bits, b, n)
+  }
+
+  const d = pushBits([ false, false, true, false ], 13, len)
+
+  const res: QrCodeMessage = {
+    data27: d.concat(bits),
+  }
+
+  if (len < 2048) {
+    const d = pushBits([ false, false, true, false ], 11, len)
+    res.data10 = d.concat(bits)
+  }
+
+  if (len < 512) {
+    const d = pushBits([ false, false, true, false ], 9, len)
+    res.data1 = d.concat(bits)
+  }
+
+  return res
+}
+
+// Encode numeric data
+function numericEncode(str: string): QrCodeMessage {
+  const len = str.length
+  const bits: boolean[] = []
+
+  for (let i = 0; i < len; i += 3) {
+    const s = str.substring(i, i + 3)
+    const b = Math.ceil(s.length * 10 / 3)
+    pushBits(bits, b, parseInt(s, 10))
+  }
+
+  const d = pushBits([ false, false, false, true ], 14, len)
+
+  const res: QrCodeMessage = {
+    data27: d.concat(bits),
+  }
+
+  if (len < 4096) {
+    const d = pushBits([ false, false, false, true ], 12, len)
+    res.data10 = d.concat(bits)
+  }
+
+  if (len < 1024) {
+    const d = pushBits([ false, false, false, true ], 10, len)
+    res.data1 = d.concat(bits)
+  }
+
+  return res
+}
+
+// Encode URLs (specific string format)
+function urlEncode(str: string): QrCodeMessage {
+  const slash = str.indexOf('/', 8) + 1 || str.length
+  const res = encodeQrCodeMessage(str.slice(0, slash).toUpperCase(), false)
+
+  if (slash >= str.length) return res
+
+  const path = encodeQrCodeMessage(str.slice(slash), false)
+
+  res.data27 = res.data27.concat(path.data27)
+
+  if (res.data10 && path.data10) {
+    res.data10 = res.data10.concat(path.data10)
+  }
+
+  if (res.data1 && path.data1) {
+    res.data1 = res.data1.concat(path.data1)
+  }
+
+  return res
+}
+
+/* ========================================================================== *
+ * EXPORTED                                                                   *
+ * ========================================================================== */
+
+/** Generate a message for the specified text or binary data */
+export function encodeQrCodeMessage(message: string | Uint8Array, url: boolean): QrCodeMessage {
+  let data: Uint8Array
+
+  if (typeof message === 'string') {
+    data = new TextEncoder().encode(message)
+
+    if (/^[0-9]+$/.test(message)) {
+      if (data.length > 7089) throw new Error(`Too much numeric data (len=${data.length})`)
+      return numericEncode(message)
+    }
+
+    if (/^[0-9A-Z $%*+./:-]+$/.test(message)) {
+      if (data.length > 4296) throw new Error(`Too much alphanumeric data (len=${data.length})`)
+      return alphanumEncode(message)
+    }
+
+    if (url && /^https?:/i.test(message)) {
+      return urlEncode(message)
+    }
+  } else {
+    data = message
+  }
+
+  if (data.length > 2953) throw new Error(`Too much binary data (len=${data.length})`)
+  return binaryEncode(data)
+}

package/src/images/path.ts

@@ -0,0 +1,131 @@
+import type { QrCode } from '../index'
+
+export type PathItem = [ 'M', number, number ] | [ 'h', number ] | [ 'v', number ]
+export type Path = PathItem[]
+export type Paths = Path[]
+
+/** Generate a set of vector paths for a QR code */
+export function generatePaths(code: QrCode): Paths {
+  const { matrix, size } = code
+
+  const filled: boolean[][] = []
+
+  for (let row = -1; row <= size; row++) {
+    filled[row] = []
+  }
+
+  const path = []
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      if (filled[row]![col]) continue
+
+      filled[row]![col] = true
+
+      if (isDark(row, col)) {
+        if (!isDark(row - 1, col)) {
+          path.push(plot(row, col, 'right'))
+        }
+      } else {
+        if (isDark(row, col - 1)) {
+          path.push(plot(row, col, 'down'))
+        }
+      }
+    }
+  }
+
+  return path
+
+  function isDark(row: number, col: number):boolean {
+    if (row < 0 || col < 0 || row >= size || col >= size) return false
+    return !! matrix[row]![col]
+  }
+
+  function plot(row0: number, col0: number, dir: 'right' | 'left' | 'down' | 'up'): Path {
+    filled[row0]![col0] = true
+    const res: Path = []
+
+    res.push([ 'M', col0, row0 ])
+    let row = row0
+    let col = col0
+    let len = 0
+
+    do {
+      switch (dir) {
+        case 'right':
+          filled[row]![col] = true
+          if (isDark(row, col)) {
+            filled[row - 1]![col] = true
+            if (isDark(row - 1, col)) {
+              res.push([ 'h', len ])
+              len = 0
+              dir = 'up'
+            } else {
+              len++
+              col++
+            }
+          } else {
+            res.push([ 'h', len ])
+            len = 0
+            dir = 'down'
+          }
+          break
+        case 'left':
+          filled[row - 1]![col - 1] = true
+          if (isDark(row - 1, col - 1)) {
+            filled[row]![col - 1] = true
+            if (isDark(row, col - 1)) {
+              res.push([ 'h', -len ])
+              len = 0
+              dir = 'down'
+            } else {
+              len++
+              col--
+            }
+          } else {
+            res.push([ 'h', -len ])
+            len = 0
+            dir = 'up'
+          }
+          break
+        case 'down':
+          filled[row]![col - 1] = true
+          if (isDark(row, col - 1)) {
+            filled[row]![col] = true
+            if (isDark(row, col)) {
+              res.push([ 'v', len ])
+              len = 0
+              dir = 'right'
+            } else {
+              len++
+              row++
+            }
+          } else {
+            res.push([ 'v', len ])
+            len = 0
+            dir = 'left'
+          }
+          break
+        case 'up':
+          filled[row - 1]![col] = true
+          if (isDark(row - 1, col)) {
+            filled[row - 1]![col - 1] = true
+            if (isDark(row - 1, col - 1)) {
+              res.push([ 'v', -len ])
+              len = 0
+              dir = 'left'
+            } else {
+              len++
+              row--
+            }
+          } else {
+            res.push([ 'v', -len ])
+            len = 0
+            dir = 'right'
+          }
+          break
+      }
+    } while (row != row0 || col != col0)
+
+    return res
+  }
+}

package/src/images/pdf.ts

@@ -0,0 +1,76 @@
+import { deflate } from '../utils/deflate'
+import { mergeArrays } from '../utils/merge'
+import { generatePaths } from './path'
+
+import type { QrCode, QrCodeImageOptions } from '..'
+
+/** Generate a PDF document for the given {@link QrCode} */
+export async function generatePdf(code: QrCode, options?: QrCodeImageOptions): Promise<Uint8Array> {
+  const { margin = 4, scale = 9 } = { ...options }
+  const size = (code.size + 2 * margin) * scale
+
+  // Our text encoder used throughout
+  const encoder = new TextEncoder()
+
+  // PDF header and preamble
+  const chunks: Uint8Array[] = [
+    encoder.encode('%PDF-1.0\n\n'), // PDF header
+    encoder.encode('1 0 obj << /Type /Catalog /Pages 2 0 R >> endobj\n'),
+    encoder.encode('2 0 obj << /Type /Pages /Count 1 /Kids [ 3 0 R ] >> endobj\n'),
+    encoder.encode(`3 0 obj << /Type /Page /Parent 2 0 R /Resources <<>> /Contents 4 0 R /MediaBox [ 0 0 ${size} ${size} ] >> endobj\n`),
+  ]
+
+  // Convert paths into a streamed PDF object
+  let path = `${scale} 0 0 ${scale} 0 0 cm\n`
+  path += generatePaths(code).map(function(subpath) {
+    let x: number = NaN
+    let y: number = NaN
+    let res: string = ''
+
+    for (let k = 0; k < subpath.length; k++) {
+      const item = subpath[k]!
+      switch (item[0]) {
+        case 'M':
+          x = item[1] + margin
+          y = code.size - item[2] + margin
+          res += x + ' ' + y + ' m '
+          break
+        case 'h':
+          x += item[1]
+          res += x + ' ' + y + ' l '
+          break
+        case 'v':
+          y -= item[1]
+          res += x + ' ' + y + ' l '
+          break
+      }
+    }
+    res += 'h'
+    return res
+  }).join('\n')
+  path += '\nf\n'
+
+  // Encode the path as our 4th object
+  const deflated = await deflate(encoder.encode(path))
+  chunks.push(mergeArrays(
+      encoder.encode(`4 0 obj << /Length ${deflated.length} /Filter /FlateDecode >> stream\n`), // start the stream
+      deflated, // the path is deflated
+      encoder.encode('\nendstream\nendobj\n'), // end the stream
+  ))
+
+  // Calculate the offsets of our objects (XREFs)
+  let xref = 'xref\n0 5\n0000000000 65535 f \n'
+  let offset = chunks[0]!.length
+  for (let i = 1; i < 5; i++) {
+    xref += `0000000000${offset}`.slice(-10) + ' 00000 n \n'
+    offset += chunks[i]!.length
+  }
+
+  chunks.push(
+      encoder.encode(xref),
+      encoder.encode('trailer << /Root 1 0 R /Size 5 >>\n'),
+      encoder.encode('startxref\n' + offset + '\n%%EOF\n'),
+  )
+
+  return mergeArrays(...chunks)
+}

package/src/images/png.ts

@@ -0,0 +1,105 @@
+import { crc32 } from '../utils/crc32'
+import { deflate } from '../utils/deflate'
+
+import type { QrCode, QrCodeImageOptions } from '../index'
+
+/* ========================================================================== *
+ * TYPES                                                                      *
+ * ========================================================================== */
+
+interface Bitmap {
+  data: Uint8Array,
+  size: number,
+}
+
+/* ========================================================================== *
+ * CONSTANTS                                                                  *
+ * ========================================================================== */
+
+const PNG_HEAD = new Uint8Array([ 137, 80, 78, 71, 13, 10, 26, 10 ])
+const PNG_IHDR = new Uint8Array([ 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0 ])
+const PNG_IDAT = new Uint8Array([ 0, 0, 0, 0, 73, 68, 65, 84 ])
+const PNG_IEND = new Uint8Array([ 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130 ])
+
+/* ========================================================================== *
+ * INTERNALS                                                                  *
+ * ========================================================================== */
+
+// Encode a PNG bitmap into a Uint8Array
+async function png(bitmap: Bitmap): Promise<Uint8Array> {
+  const chunks: Uint8Array[] = []
+
+  // push the PNG header
+  chunks.push(PNG_HEAD)
+
+  // create the image header
+  const imageHeader = new Uint8Array(PNG_IHDR)
+  const imageHeaderView = new DataView(imageHeader.buffer)
+
+  imageHeaderView.setUint32(8, bitmap.size, false) // width of the PNG image
+  imageHeaderView.setUint32(12, bitmap.size, false) // height of the PNG image
+  imageHeaderView.setUint32(21, crc32(imageHeader, 4, -4), false) // crc at the end
+
+  chunks.push(imageHeader) // push our first "chunk"
+
+  // compress our image data
+  const data = await deflate(bitmap.data)
+
+  // create our image data array (header, compressed data, crc)
+  const imageData = new Uint8Array(PNG_IDAT.length + data.length + 4)
+  const imageDataView = new DataView(imageData.buffer)
+
+  imageData.set(PNG_IDAT, 0) // first is the image data preamble
+  imageData.set(data, PNG_IDAT.length) // then is the compressed data
+  imageDataView.setUint32(0, imageData.length - 12, false) // length goes at the beginning
+  imageDataView.setUint32(imageData.length - 4, crc32(imageData, 4, -4), false) // then crc at the end
+
+  chunks.push(imageData) // second "chunk"
+
+  // push the PNG trailer "as is"
+  chunks.push(PNG_IEND)
+
+  // combine our chunks into a single array
+  return new Uint8Array(await new Blob(chunks).arrayBuffer())
+}
+
+// Convert a matrix to a PNG bitmap
+function bitmap(matrix: readonly boolean[][], scale: number, margin: number): Bitmap {
+  const n = matrix.length
+  const x = (n + 2 * margin) * scale
+  const data = new Uint8Array((x + 1) * x).fill(255)
+
+  for (let i = 0; i < x; i++) {
+    data[i * (x + 1)] = 0
+  }
+
+  for (let i = 0; i < n; i++) {
+    for (let j = 0; j < n; j++) {
+      if (matrix[i]![j]) {
+        const offset = ((margin + i) * (x + 1) + (margin + j)) * scale + 1
+        data.fill(0, offset, offset + scale)
+        for (let c = 1; c < scale; c++) {
+          const chunk = data.subarray(offset, offset + scale)
+          data.set(chunk, offset + c * (x + 1))
+        }
+      }
+    }
+  }
+
+  return {
+    data: data,
+    size: x,
+  }
+}
+
+/* ========================================================================== *
+ * EXPORTED                                                                   *
+ * ========================================================================== */
+
+/** Generate a PNG image for the given {@link QrCode} */
+export async function generatePng(code: QrCode, options?: QrCodeImageOptions): Promise<Uint8Array> {
+  const { margin = 4, scale = 1 } = { ...options }
+  const result = bitmap(code.matrix, scale, margin)
+  const image = await png(result)
+  return image
+}

package/src/images/svg.ts

@@ -0,0 +1,102 @@
+import { generatePaths } from './path'
+
+import type { QrCode, QrCodeImageOptions } from '..'
+
+/* ========================================================================== *
+ * INTERNALS                                                                  *
+ * ========================================================================== */
+
+function convertPath(
+    chunks: (string | number)[],
+    code: QrCode,
+    margin: number,
+): (string | number)[] {
+  generatePaths(code).forEach((path) => {
+    for (let k = 0; k < path.length; k++) {
+      const item = path[k]!
+      switch (item[0]) {
+        case 'M': // move
+          chunks.push(`M${item[1] + margin} ${item[2] + margin}`)
+          break
+        default: // draw path
+          chunks.push(...item)
+      }
+    }
+    chunks.push('z') // done
+  })
+
+  return chunks
+}
+
+/* ========================================================================== *
+ * EXPORTED                                                                   *
+ * ========================================================================== */
+
+/**
+ * Generate a SVG _path_ for the given {@link QrCode}.
+ *
+ * The returned SVG path will be a simple conversion of the QR code's own
+ * {@link QrCode.matrix matrix} into a square path of _**N**_ "pixels"
+ * (where _**N**_ is the size of the {@link QrCode.size size} of the matrix).
+ *
+ * This can be scaled and positioned into a final SVG using the `scale(...)` and
+ * `translate(...)` [basic SVG transformations](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations).
+ *
+ * This is also particulary useful with [PDFKit](https://pdfkit.org/)'s own
+ * implementation of [SVG paths](https://pdfkit.org/docs/vector.html#svg_paths).
+ *
+ * We can use it together with `translate(...)` and `scale(...)` to draw our QR
+ * code anywhere on the page, in any size. For example, to prepare a simple A4
+ * document with a 10cm QR code smack in the middle we can:
+ *
+ * ```typescript
+ * // generate the QR code _structure_ for our message
+ * const code = generateQrCode('https://www.juit.com/')
+ *
+ * // generate the SVG path for our QR code
+ * const path = generateSvgPath(code)
+ *
+ * // calculate how to translate and scale our QR code in the page
+ * const dpcm = 72 / 2.54             // PDFKit uses 72dpi (inches) we want metric!
+ * const size = 10 * dpcm             // 10 cm (size of our QR code) in dots
+ * const scale = size / code.size     // scale factor for our QR code to be 10 cm
+ * const x = ((21 - 10) / 2) * dpcm   // center horizontally
+ * const y = ((29.7 - 10) / 2) * dpcm // center vertically
+ *
+ * // create a new A4 document, and stream it to "test.pdf"
+ * const document = new PDFDocument({ size: 'A4' })
+ * const stream = createWriteStream('test.pdf')
+ * document.pipe(stream)
+ *
+ * // draw our 10cm QR code right in the middle of the page
+ * document
+ *   .translate(x, y) // move to x = 5.5cm, y = 9.85cm
+ *   .scale(scale)    // scale our QR code to 10cm width and height
+ *   .path(path)      // draw our QR code smack in the middle of the page
+ *   .fill('black')   // fill our QR code in black
+ *   .end()           // finish up and close the document
+ *
+ * // wait for the stream to finish
+ * stream.on('finish', () => {
+ *   // your PDF file is ready!
+ * })
+ * ```
+ */
+export function generateSvgPath(code: QrCode): string {
+  return convertPath([], code, 0).join()
+}
+
+/** Generate a SVG image for the given {@link QrCode} */
+export function generateSvg(code: QrCode, options?: QrCodeImageOptions): string {
+  const { margin = 4, scale = 1 } = { ...options }
+  const size = code.size + 2 * margin
+  const scaled = size * scale
+
+  const chunks = convertPath([
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${scaled}" height="${scaled}" viewBox="0 0 ${size} ${size}">`,
+    '<path d="', // beginning of the path "d" attribute...
+  ], code, margin)
+
+  chunks.push('"/></svg>') // close the path "d" attribute
+  return chunks.join('')
+}