feat: add PNG/raster output support (#86)

* feat(#3): add PNG/raster output support

Pure-JS PNG encoder (zero dependencies) that rasterizes directly from
encoder data. Palette-based PNG with stored DEFLATE compression.

API: barcodePNG, qrcodePNG, datamatrixPNG, pdf417PNG, aztecPNG,
gs1datamatrixPNG + *PNGDataURI variants. New subpath: etiket/png.

Extracts encodeBars() from _barcode.ts for shared use between SVG and
PNG rendering paths.

Author: ejirocodes

.github/assets/cover.png

@@ -1,6 +1,6 @@
 # etiket
 
-Zero-dependency barcode & QR code SVG generator. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript.
+Zero-dependency barcode & QR code generator — SVG & PNG output. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript.
 
 > [!IMPORTANT]
 > Keep `AGENTS.md` updated with project status.
@@ -15,6 +15,7 @@ src/
   datamatrix.ts             # Sub-path: etiket/datamatrix
   pdf417.ts                 # Sub-path: etiket/pdf417
   aztec.ts                  # Sub-path: etiket/aztec
+  png.ts                    # Sub-path: etiket/png
   cli.ts                    # CLI entry (citty + consola)
   errors.ts                 # Custom error classes
   env.d.ts                  # Runtime type declarations
@@ -78,14 +79,21 @@ src/
       optimize.ts           # SVG optimization
       types.ts              # All rendering types
       utils.ts              # escapeAttr utility
+    png/
+      types.ts              # BarcodePNGOptions, MatrixPNGOptions
+      crc32.ts              # CRC32 for PNG chunk checksums
+      adler32.ts            # Adler32 for zlib wrapper
+      deflate.ts            # Stored DEFLATE + zlib compression
+      png-encoder.ts        # PNG chunk assembly (palette-based)
+      rasterize.ts          # bars/matrix → pixel rows → PNG
     text.ts                 # Terminal output (Unicode blocks)
     data-uri.ts             # SVG → Data URI / Base64
   validators/
     index.ts                # Re-exports
     barcode.ts              # Per-format validation
     qr.ts                   # QR validation with metadata
 test/
-  *.test.ts                 # 63 test files, 834+ tests
+  *.test.ts                 # 67 test files, 905+ tests
   qr-roundtrip.test.ts      # QR encode→decode via jsQR (all versions, EC, masks)
   barcode-roundtrip.test.ts # 1D barcode structural validation
 docs/
@@ -94,10 +102,12 @@ docs/
 
 ## Public API
 
-Single entry: `etiket` (everything). Sub-paths: `etiket/barcode`, `etiket/qr`, `etiket/datamatrix`, `etiket/pdf417`, `etiket/aztec`.
+Single entry: `etiket` (everything). Sub-paths: `etiket/barcode`, `etiket/qr`, `etiket/datamatrix`, `etiket/pdf417`, `etiket/aztec`, `etiket/png`.
 
 Key functions: `barcode()`, `qrcode()`, `datamatrix()`, `pdf417()`, `aztec()`, `gs1datamatrix()`, `swissQR()`, `gs1DigitalLink()`, `wifi()`, `vcard()`, `mecard()`, `event()`, `phone()`, `email()`, `sms()`, `geo()`, `encode()`, `optimizeSVG()`.
 
+PNG functions: `barcodePNG()`, `qrcodePNG()`, `datamatrixPNG()`, `pdf417PNG()`, `aztecPNG()`, `gs1datamatrixPNG()` + `*PNGDataURI()` variants. Low-level: `renderBarcodePNG()`, `renderMatrixPNG()`.
+
 ## Build & Scripts
 
 ```bash

.github/assets/cover.svg

@@ -1,10 +1,10 @@
 <p align="center">
   <br>
-  <img src=".github/assets/cover.png" alt="etiket — Zero-dependency barcode & QR code SVG generator" width="100%">
+  <img src=".github/assets/cover.png" alt="etiket — Zero-dependency barcode & QR code generator (SVG & PNG)" width="100%">
   <br><br>
   <b style="font-size: 2em;">etiket</b>
   <br><br>
-  Zero-dependency barcode & QR code SVG generator.
+  Zero-dependency barcode & QR code generator — SVG & PNG output.
   <br>
   40+ formats, styled QR codes, tree-shakeable. Pure TypeScript, works everywhere.
   <br><br>
@@ -57,6 +57,7 @@ import { qrcode } from "etiket/qr"; // QR codes only
 import { datamatrix } from "etiket/datamatrix";
 import { pdf417 } from "etiket/pdf417";
 import { aztec } from "etiket/aztec";
+import { barcodePNG, qrcodePNG } from "etiket/png"; // PNG output
 ```
 
 ## Supported Formats
@@ -235,12 +236,22 @@ import {
   barcodeBase64,
   qrcodeBase64,
   qrcodeTerminal,
+  barcodePNG,
+  qrcodePNG,
+  barcodePNGDataURI,
+  qrcodePNGDataURI,
 } from "etiket";
 
+// SVG
 const svg = qrcode("Hello"); // SVG string
 const uri = qrcodeDataURI("Hello"); // data:image/svg+xml,...
 const b64 = qrcodeBase64("Hello"); // data:image/svg+xml;base64,...
 const term = qrcodeTerminal("Hello"); // Terminal (UTF-8 blocks)
+
+// PNG (zero-dependency raster output)
+const png = qrcodePNG("Hello"); // Uint8Array
+const pngUri = qrcodePNGDataURI("Hello"); // data:image/png;base64,...
+const barPng = barcodePNG("12345", { type: "code128" }); // Uint8Array
 ```
 
 ## Convenience Helpers
@@ -318,14 +329,21 @@ import {
   renderBarcodeSVG,
   renderQRCodeSVG,
   renderMatrixSVG,
+  renderBarcodePNG,
+  renderMatrixPNG,
 } from "etiket";
 
 const bars = encodeCode128("data"); // number[] (bar/space widths)
 const matrix = encodeQR("data"); // boolean[][] (QR matrix)
 const dm = encodeDataMatrix("data"); // boolean[][] (Data Matrix)
 
+// SVG rendering
 const svg = renderBarcodeSVG(bars, { height: 100 });
 const qrSvg = renderQRCodeSVG(matrix, { size: 400, dotType: "dots" });
+
+// PNG rendering
+const png = renderBarcodePNG(bars, { height: 100, scale: 2 });
+const qrPng = renderMatrixPNG(matrix, { moduleSize: 10, margin: 4 });
 ```
 
 ## Industry Standards
@@ -399,6 +417,7 @@ barcode("HELLO", { color: "currentColor", background: "transparent" });
 - Tree-shakeable sub-path exports
 - CLI tool (`npx etiket`)
 - SVG string output (no DOM required) + `optimizeSVG()` for compact inline
+- PNG raster output (pure JS, zero dependencies) via `etiket/png`
 - SVG accessibility (`ariaLabel`, `role`, `title`, `desc`)
 - Measurement units (`px`, `mm`, `in`, `cm`, `pt`) for print use cases
 - CSS `currentColor` support for theme-aware barcodes
@@ -430,11 +449,11 @@ barcode("HELLO", { color: "currentColor", background: "transparent" });
 | Convenience helpers (WiFi, vCard...) | :white_check_mark: |                :x:                 |                       :x:                       |                        :x:                        |                               :x:                                |
 | Input validation                     | :white_check_mark: |                :x:                 |                       :x:                       |                        :x:                        |                               :x:                                |
 | SVG output                           | :white_check_mark: |         :white_check_mark:         |               :white_check_mark:                |                :white_check_mark:                 |                        :white_check_mark:                        |
-| PNG/Canvas output                    |        :x:         |                :x:                 |               :white_check_mark:                |                :white_check_mark:                 |                        :white_check_mark:                        |
+| PNG output                           | :white_check_mark: |                :x:                 |               :white_check_mark:                |                :white_check_mark:                 |                        :white_check_mark:                        |
 | Pure ESM                             | :white_check_mark: |         :white_check_mark:         |                    :x: (CJS)                    |                     :x: (CJS)                     |                            :x: (CJS)                             |
 | Bundle size (gzip)                   |       ~24KB        |               ~12KB                |                     ~160KB                      |                       ~15KB                       |                            ~30KB+deps                            |
 
-**etiket is the only library that combines** 1D barcodes + 2D codes + styled QR codes + zero dependencies + tree-shaking in a single package.
+**etiket is the only library that combines** 1D barcodes + 2D codes + styled QR codes + SVG & PNG output + zero dependencies + tree-shaking in a single package.
 
 ## Inspiration & Credits
 
@@ -459,7 +478,6 @@ Contributions are welcome! Here are some areas where help is especially apprecia
 
 **Other contributions:**
 
-- PNG/raster output support ([#3](https://github.com/productdevbook/etiket/issues/3))
 - Data Matrix DMRE rectangular sizes ([#71](https://github.com/productdevbook/etiket/issues/71))
 - GS1 DataBar stacked variants ([#61](https://github.com/productdevbook/etiket/issues/61))
 - Round-trip scan tests for experimental formats

AGENTS.md

@@ -11,6 +11,7 @@ export default defineBuildConfig({
         "./src/datamatrix.ts",
         "./src/pdf417.ts",
         "./src/aztec.ts",
+        "./src/png.ts",
         "./src/cli.ts",
       ],
       minify: true,

README.md

@@ -1,6 +1,6 @@
 # etiket
 
-Zero-dependency barcode & QR code SVG generator. 20+ formats, styled QR codes, tree-shakeable. Pure TypeScript, works everywhere.
+Zero-dependency barcode & QR code generator — SVG & PNG output. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript, works everywhere.
 
 ## Why etiket?
 

build.config.ts

@@ -1,7 +1,7 @@
 {
   "name": "etiket",
   "version": "0.8.1",
-  "description": "Zero-dependency barcode & QR code SVG generator. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript, works everywhere.",
+  "description": "Zero-dependency barcode & QR code generator — SVG & PNG output. 40+ formats, styled QR codes, tree-shakeable. Pure TypeScript, works everywhere.",
   "keywords": [
     "aztec",
     "barcode",
@@ -21,9 +21,11 @@
     "msi",
     "pdf417",
     "pharmacode",
+    "png",
     "qr",
     "qr-code",
     "qrcode",
+    "raster",
     "svg",
     "tree-shakeable",
     "typescript",
@@ -74,6 +76,10 @@
     "./aztec": {
       "types": "./dist/aztec.d.mts",
       "default": "./dist/aztec.mjs"
+    },
+    "./png": {
+      "types": "./dist/png.d.mts",
+      "default": "./dist/png.mjs"
     }
   },
   "scripts": {

docs/index.md

@@ -24,120 +24,109 @@ import { encodePOSTNET, encodePLANET } from "./encoders/postnet";
 import { encodePlessey } from "./encoders/plessey";
 import { renderBarcodeSVG } from "./renderers/svg/barcode";
 import { svgToDataURI, svgToBase64 } from "./renderers/data-uri";
-import type { BarcodeOptions } from "./_types";
+import type { BarcodeEncodingOptions, BarcodeOptions } from "./_types";
 
 /**
- * Generate a barcode as SVG string
+ * Encode barcode text to bar width pattern
  */
-export function barcode(text: string, options: BarcodeOptions = {}): string {
+export function encodeBars(text: string, options: BarcodeEncodingOptions = {}): number[] {
   const {
     type = "code128",
     msiCheckDigit,
     code39CheckDigit,
     codabarStart,
     codabarStop,
     code128Charset,
-    ...svgOptions
   } = options;
 
-  let bars: number[];
-
   switch (type) {
     case "code128":
-      bars = encodeCode128(text, code128Charset ? { charset: code128Charset } : undefined);
-      break;
+      return encodeCode128(text, code128Charset ? { charset: code128Charset } : undefined);
     case "ean13":
-      bars = encodeEAN13(text).bars;
-      break;
+      return encodeEAN13(text).bars;
     case "ean8":
-      bars = encodeEAN8(text).bars;
-      break;
+      return encodeEAN8(text).bars;
     case "code39":
-      bars = encodeCode39(text, { checkDigit: code39CheckDigit });
-      break;
+      return encodeCode39(text, { checkDigit: code39CheckDigit });
     case "code39ext":
-      bars = encodeCode39Extended(text, { checkDigit: code39CheckDigit });
-      break;
+      return encodeCode39Extended(text, { checkDigit: code39CheckDigit });
     case "code93":
-      bars = encodeCode93(text);
-      break;
+      return encodeCode93(text);
     case "code93ext":
-      bars = encodeCode93Extended(text);
-      break;
+      return encodeCode93Extended(text);
     case "itf":
-      bars = encodeITF(text);
-      break;
+      return encodeITF(text);
     case "itf14":
-      bars = encodeITF14(text);
-      break;
+      return encodeITF14(text);
     case "upca":
-      bars = encodeUPCA(text).bars;
-      break;
+      return encodeUPCA(text).bars;
     case "upce":
-      bars = encodeUPCE(text).bars;
-      break;
+      return encodeUPCE(text).bars;
     case "ean2":
-      bars = encodeEAN2(text);
-      break;
+      return encodeEAN2(text);
     case "ean5":
-      bars = encodeEAN5(text);
-      break;
+      return encodeEAN5(text);
     case "codabar":
-      bars = encodeCodabar(text, { start: codabarStart, stop: codabarStop });
-      break;
+      return encodeCodabar(text, { start: codabarStart, stop: codabarStop });
     case "msi":
-      bars = encodeMSI(text, { checkDigit: msiCheckDigit });
-      break;
+      return encodeMSI(text, { checkDigit: msiCheckDigit });
     case "pharmacode":
-      bars = encodePharmacode(Number(text));
-      break;
+      return encodePharmacode(Number(text));
     case "code11":
-      bars = encodeCode11(text);
-      break;
+      return encodeCode11(text);
     case "gs1-128":
-      bars = encodeGS1128(text);
-      break;
+      return encodeGS1128(text);
     case "identcode":
-      bars = encodeIdentcode(text);
-      break;
+      return encodeIdentcode(text);
     case "leitcode":
-      bars = encodeLeitcode(text);
-      break;
+      return encodeLeitcode(text);
     case "postnet": {
       const heights = encodePOSTNET(text);
-      bars = [];
+      const bars: number[] = [];
       for (const _h of heights) {
         bars.push(1);
         bars.push(1);
       }
       bars.pop();
-      break;
+      return bars;
     }
     case "planet": {
       const heights = encodePLANET(text);
-      bars = [];
+      const bars: number[] = [];
       for (const _h of heights) {
         bars.push(1);
         bars.push(1);
       }
       bars.pop();
-      break;
+      return bars;
     }
     case "plessey":
-      bars = encodePlessey(text);
-      break;
+      return encodePlessey(text);
     case "gs1-databar":
-      bars = encodeGS1DataBarOmni(text);
-      break;
+      return encodeGS1DataBarOmni(text);
     case "gs1-databar-limited":
-      bars = encodeGS1DataBarLimited(text);
-      break;
+      return encodeGS1DataBarLimited(text);
     case "gs1-databar-expanded":
-      bars = encodeGS1DataBarExpanded(text);
-      break;
+      return encodeGS1DataBarExpanded(text);
     default:
       throw new Error(`Unsupported barcode type: ${type}`);
   }
+}
+
+/**
+ * Generate a barcode as SVG string
+ */
+export function barcode(text: string, options: BarcodeOptions = {}): string {
+  const {
+    type: _type,
+    msiCheckDigit: _msi,
+    code39CheckDigit: _c39,
+    codabarStart: _cbStart,
+    codabarStop: _cbStop,
+    code128Charset: _c128,
+    ...svgOptions
+  } = options;
+  const bars = encodeBars(text, options);
 
   return renderBarcodeSVG(bars, {
     ...svgOptions,