fast-pixelizer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 handsupmin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,197 @@
+# fast-pixelizer
+
+Fast, zero-dependency image pixelation library. Works in **browser** and **Node.js**.
+
+[![npm](https://img.shields.io/npm/v/fast-pixelizer)](https://www.npmjs.com/package/fast-pixelizer)
+[![license](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/fast-pixelizer)](https://bundlephobia.com/package/fast-pixelizer)
+
+---
+
+## Overview
+
+|           |             Original             |                   `clean`                    |                    `detail`                    |
+| :-------: | :------------------------------: | :------------------------------------------: | :--------------------------------------------: |
+| **32×32** | ![original](./docs/original.png) | ![clean-32](./examples/example-32-clean.png) | ![detail-32](./examples/example-32-detail.png) |
+| **64×64** | ![original](./docs/original.png) | ![clean-64](./examples/example-64-clean.png) | ![detail-64](./examples/example-64-detail.png) |
+
+**`clean`** — picks the most frequent color in each cell. Sharp, graphic pixel art look.
+
+**`detail`** — averages all colors in each cell. Smoother gradients, more texture.
+
+---
+
+## Install
+
+```bash
+npm install fast-pixelizer
+```
+
+---
+
+## Usage
+
+```ts
+import { pixelate } from 'fast-pixelizer'
+
+const result = pixelate(imageData, { resolution: 32 })
+// → { data: Uint8ClampedArray, width: number, height: number }
+```
+
+The input accepts a browser `ImageData`, a `node-canvas` image data object, or any plain `{ data: Uint8ClampedArray, width: number, height: number }`.
+
+### Browser
+
+```ts
+import { pixelate } from 'fast-pixelizer'
+
+const canvas = document.querySelector('canvas')
+const ctx = canvas.getContext('2d')
+ctx.drawImage(myImage, 0, 0)
+
+const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+const result = pixelate(imageData, { resolution: 32 })
+
+// Draw back
+const out = new ImageData(result.data, result.width, result.height)
+ctx.putImageData(out, 0, 0)
+```
+
+### Node.js (with [sharp](https://sharp.pixelplumbing.com))
+
+```ts
+import sharp from 'sharp'
+import { pixelate } from 'fast-pixelizer'
+
+const { data, info } = await sharp('./photo.png')
+  .ensureAlpha()
+  .raw()
+  .toBuffer({ resolveWithObject: true })
+
+const result = pixelate(
+  { data: new Uint8ClampedArray(data.buffer), width: info.width, height: info.height },
+  { resolution: 32 },
+)
+
+await sharp(Buffer.from(result.data), {
+  raw: { width: result.width, height: result.height, channels: 4 },
+})
+  .png()
+  .toFile('./output.png')
+```
+
+---
+
+## API
+
+### `pixelate(input, options): PixelateResult`
+
+#### `input: ImageLike`
+
+```ts
+interface ImageLike {
+  data: Uint8ClampedArray
+  width: number
+  height: number
+}
+```
+
+Compatible with the browser's built-in `ImageData`, `node-canvas`, and raw pixel buffers.
+
+#### `options: PixelateOptions`
+
+| Option       | Type                      | Default      | Description                                                                                 |
+| ------------ | ------------------------- | ------------ | ------------------------------------------------------------------------------------------- |
+| `resolution` | `number`                  | **required** | Grid size. `32` means a 32×32 cell grid. Clamped to image dimensions automatically.         |
+| `mode`       | `'clean' \| 'detail'`     | `'clean'`    | `'clean'` = most-frequent color per cell. `'detail'` = average color per cell.              |
+| `output`     | `'original' \| 'resized'` | `'original'` | `'original'` = same dimensions as input. `'resized'` = output is `resolution × resolution`. |
+
+#### `PixelateResult`
+
+```ts
+interface PixelateResult {
+  data: Uint8ClampedArray
+  width: number
+  height: number
+}
+```
+
+---
+
+## Examples
+
+```ts
+// Defaults: clean mode, original size
+pixelate(img, { resolution: 32 })
+
+// Average color, output as resolution × resolution
+pixelate(img, { resolution: 64, mode: 'detail', output: 'resized' })
+
+// Very blocky, 8×8 grid
+pixelate(img, { resolution: 8 })
+```
+
+### Try it locally
+
+Clone the repo and run the library against the sample image to see the output yourself:
+
+```bash
+git clone https://github.com/handsupmin/fast-pixelizer.git
+cd fast-pixelizer
+npm install
+npm run examples
+```
+
+Output images will be written to `examples/`. Replace `docs/original.png` with any image to try your own.
+
+---
+
+## Performance
+
+| Resolution | Image size | clean | detail |
+| ---------- | ---------- | ----- | ------ |
+| 32         | 512×512    | ~1ms  | ~0.5ms |
+| 128        | 512×512    | ~3ms  | ~1ms   |
+| 256        | 1024×1024  | ~12ms | ~5ms   |
+
+- **`clean` mode** uses a pre-allocated `Uint16Array(32768)` bucket table — no `Map`, no per-call heap allocations.
+- **`detail` mode** is a single accumulation pass with no allocations.
+- Cell boundaries use `Math.round` to eliminate pixel gaps and overlaps between adjacent cells.
+- Both modes iterate in row-major order for CPU cache locality.
+- Zero runtime dependencies.
+
+---
+
+## Web Worker (browser)
+
+For large images, run `pixelate` inside a Worker to keep the main thread unblocked:
+
+```ts
+// pixelate.worker.ts
+import { pixelate } from 'fast-pixelizer'
+
+self.onmessage = (e) => {
+  const { input, options } = e.data
+  const result = pixelate(input, options)
+  self.postMessage(result, [result.data.buffer]) // transfer buffer, no copy
+}
+```
+
+```ts
+// main thread
+const worker = new Worker(new URL('./pixelate.worker.ts', import.meta.url), { type: 'module' })
+worker.postMessage({ input, options }, [input.data.buffer])
+worker.onmessage = (e) => console.log(e.data) // PixelateResult
+```
+
+---
+
+## Contributing
+
+Contributions are welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+---
+
+## License
+
+[MIT](./LICENSE)

package/dist/index.cjs

@@ -0,0 +1,120 @@
+'use strict';
+
+// src/algorithms.ts
+var _freq = new Uint16Array(32768);
+var _touched = [];
+function getFrequentColor(data, width, x0, y0, x1, y1) {
+  for (let i = 0; i < _touched.length; i++) _freq[_touched[i]] = 0;
+  _touched.length = 0;
+  let maxCount = 0;
+  let bestKey = 0;
+  let transparentCount = 0;
+  let totalPixels = 0;
+  for (let py = y0; py < y1; py++) {
+    const row = py * width * 4;
+    for (let px = x0; px < x1; px++) {
+      const i = row + px * 4;
+      const a = data[i + 3];
+      totalPixels++;
+      if (a < 128) {
+        transparentCount++;
+        continue;
+      }
+      const key = data[i] >> 3 << 10 | data[i + 1] >> 3 << 5 | data[i + 2] >> 3;
+      if (_freq[key] === 0) _touched.push(key);
+      const c = ++_freq[key];
+      if (c > maxCount) {
+        maxCount = c;
+        bestKey = key;
+      }
+    }
+  }
+  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0];
+  return [(bestKey >> 10 & 31) << 3, (bestKey >> 5 & 31) << 3, (bestKey & 31) << 3, 255];
+}
+function getAverageColor(data, width, x0, y0, x1, y1) {
+  let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+  let transparentCount = 0;
+  let totalPixels = 0;
+  for (let py = y0; py < y1; py++) {
+    const row = py * width * 4;
+    for (let px = x0; px < x1; px++) {
+      const i = row + px * 4;
+      const a = data[i + 3];
+      totalPixels++;
+      aSum += a;
+      if (a < 128) {
+        transparentCount++;
+        continue;
+      }
+      rSum += data[i];
+      gSum += data[i + 1];
+      bSum += data[i + 2];
+    }
+  }
+  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0];
+  const visible = totalPixels - transparentCount;
+  return [
+    visible > 0 ? rSum / visible + 0.5 | 0 : 0,
+    visible > 0 ? gSum / visible + 0.5 | 0 : 0,
+    visible > 0 ? bSum / visible + 0.5 | 0 : 0,
+    aSum / totalPixels + 0.5 | 0
+  ];
+}
+
+// src/index.ts
+function pixelate(input, options) {
+  const { data, width, height } = input;
+  const { mode = "clean", output = "original" } = options;
+  const resolution = Math.max(1, Math.min(Math.floor(options.resolution), width, height));
+  const getColor = mode === "clean" ? getFrequentColor : getAverageColor;
+  const cellW = width / resolution;
+  const cellH = height / resolution;
+  const cellColors = new Uint8ClampedArray(resolution * resolution * 4);
+  for (let row = 0; row < resolution; row++) {
+    for (let col = 0; col < resolution; col++) {
+      const x0 = Math.round(col * cellW);
+      const y0 = Math.round(row * cellH);
+      const x1 = Math.round((col + 1) * cellW);
+      const y1 = Math.round((row + 1) * cellH);
+      const [r, g, b, a] = getColor(data, width, x0, y0, x1, y1);
+      const idx = (row * resolution + col) * 4;
+      cellColors[idx] = r;
+      cellColors[idx + 1] = g;
+      cellColors[idx + 2] = b;
+      cellColors[idx + 3] = a;
+    }
+  }
+  if (output === "resized") {
+    return { data: cellColors, width: resolution, height: resolution };
+  }
+  const out = new Uint8ClampedArray(width * height * 4);
+  for (let row = 0; row < resolution; row++) {
+    for (let col = 0; col < resolution; col++) {
+      const idx = (row * resolution + col) * 4;
+      const r = cellColors[idx];
+      const g = cellColors[idx + 1];
+      const b = cellColors[idx + 2];
+      const a = cellColors[idx + 3];
+      const x0 = Math.round(col * cellW);
+      const y0 = Math.round(row * cellH);
+      const x1 = Math.round((col + 1) * cellW);
+      const y1 = Math.round((row + 1) * cellH);
+      for (let py = y0; py < y1; py++) {
+        const rowBase = py * width * 4;
+        for (let px = x0; px < x1; px++) {
+          const i = rowBase + px * 4;
+          out[i] = r;
+          out[i + 1] = g;
+          out[i + 2] = b;
+          out[i + 3] = a;
+        }
+      }
+    }
+  }
+  return { data: out, width, height };
+}
+
+exports.pixelate = pixelate;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/algorithms.ts","../src/index.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Pre-allocated frequency table for frequent-color sampling.\n * 5 bits per channel (>> 3) → 32^3 = 32,768 buckets.\n * Safe because JS is single-threaded per context.\n */\nconst _freq = new Uint16Array(32768)\nconst _touched: number[] = []\n\n/**\n * Returns the most-frequent quantized color in the cell.\n * Uses a typed-array bucket table instead of Map for speed.\n */\nexport function getFrequentColor(\n  data: Uint8ClampedArray,\n  width: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n): [number, number, number, number] {\n  // Reset only buckets touched in the previous call\n  for (let i = 0; i < _touched.length; i++) _freq[_touched[i]] = 0\n  _touched.length = 0\n\n  let maxCount = 0\n  let bestKey = 0\n  let transparentCount = 0\n  let totalPixels = 0\n\n  for (let py = y0; py < y1; py++) {\n    const row = py * width * 4\n    for (let px = x0; px < x1; px++) {\n      const i = row + px * 4\n      const a = data[i + 3]\n      totalPixels++\n      if (a < 128) {\n        transparentCount++\n        continue\n      }\n      // Pack 5-bit quantized channels into a single 15-bit key\n      const key = ((data[i] >> 3) << 10) | ((data[i + 1] >> 3) << 5) | (data[i + 2] >> 3)\n      if (_freq[key] === 0) _touched.push(key)\n      const c = ++_freq[key]\n      if (c > maxCount) {\n        maxCount = c\n        bestKey = key\n      }\n    }\n  }\n\n  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0]\n\n  // Decode key back to RGB (multiply by 8 to restore approximate original range)\n  return [((bestKey >> 10) & 31) << 3, ((bestKey >> 5) & 31) << 3, (bestKey & 31) << 3, 255]\n}\n\n/**\n * Returns the average color of visible (non-transparent) pixels in the cell.\n */\nexport function getAverageColor(\n  data: Uint8ClampedArray,\n  width: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n): [number, number, number, number] {\n  let rSum = 0,\n    gSum = 0,\n    bSum = 0,\n    aSum = 0\n  let transparentCount = 0\n  let totalPixels = 0\n\n  for (let py = y0; py < y1; py++) {\n    const row = py * width * 4\n    for (let px = x0; px < x1; px++) {\n      const i = row + px * 4\n      const a = data[i + 3]\n      totalPixels++\n      aSum += a\n      if (a < 128) {\n        transparentCount++\n        continue\n      }\n      rSum += data[i]\n      gSum += data[i + 1]\n      bSum += data[i + 2]\n    }\n  }\n\n  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0]\n\n  const visible = totalPixels - transparentCount\n  // (x + 0.5) | 0  ≡  Math.round(x) for non-negative values — avoids function call overhead\n  return [\n    visible > 0 ? (rSum / visible + 0.5) | 0 : 0,\n    visible > 0 ? (gSum / visible + 0.5) | 0 : 0,\n    visible > 0 ? (bSum / visible + 0.5) | 0 : 0,\n    (aSum / totalPixels + 0.5) | 0,\n  ]\n}\n","import { getAverageColor, getFrequentColor } from './algorithms'\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\n/**\n * Any object with `data`, `width`, `height` — compatible with the browser's\n * built-in `ImageData` as well as node-canvas and raw buffers.\n */\nexport interface ImageLike {\n  data: Uint8ClampedArray\n  width: number\n  height: number\n}\n\nexport interface PixelateOptions {\n  /**\n   * Number of pixel cells along each axis (e.g. 32 → 32×32 grid).\n   * Any positive integer. Values larger than the image dimension are clamped.\n   */\n  resolution: number\n\n  /**\n   * Color sampling algorithm per cell.\n   * - `'clean'`  — most-frequent color (sharp, graphic look) [default]\n   * - `'detail'` — average color (smoother gradients, more texture)\n   */\n  mode?: 'clean' | 'detail'\n\n  /**\n   * Output dimensions.\n   * - `'original'` — same size as input, cells filled with uniform color [default]\n   * - `'resized'`  — output is `resolution × resolution` pixels\n   */\n  output?: 'original' | 'resized'\n}\n\nexport interface PixelateResult {\n  data: Uint8ClampedArray\n  width: number\n  height: number\n}\n\n// ─── Core ────────────────────────────────────────────────────────────────────\n\n/**\n * Pixelates an image synchronously.\n *\n * Works in both browser and Node.js (no DOM required).\n *\n * @example\n * ```ts\n * const result = pixelate(imageData, { resolution: 32 })\n * const result = pixelate(imageData, { resolution: 64, mode: 'detail', output: 'resized' })\n * ```\n */\nexport function pixelate(input: ImageLike, options: PixelateOptions): PixelateResult {\n  const { data, width, height } = input\n  const { mode = 'clean', output = 'original' } = options\n\n  const resolution = Math.max(1, Math.min(Math.floor(options.resolution), width, height))\n\n  const getColor = mode === 'clean' ? getFrequentColor : getAverageColor\n  const cellW = width / resolution\n  const cellH = height / resolution\n\n  // Sample one color per cell\n  const cellColors = new Uint8ClampedArray(resolution * resolution * 4)\n\n  for (let row = 0; row < resolution; row++) {\n    for (let col = 0; col < resolution; col++) {\n      const x0 = Math.round(col * cellW)\n      const y0 = Math.round(row * cellH)\n      const x1 = Math.round((col + 1) * cellW)\n      const y1 = Math.round((row + 1) * cellH)\n      const [r, g, b, a] = getColor(data, width, x0, y0, x1, y1)\n      const idx = (row * resolution + col) * 4\n      cellColors[idx] = r\n      cellColors[idx + 1] = g\n      cellColors[idx + 2] = b\n      cellColors[idx + 3] = a\n    }\n  }\n\n  // Build output\n  if (output === 'resized') {\n    return { data: cellColors, width: resolution, height: resolution }\n  }\n\n  // output === 'original': paint each cell back at full size\n  const out = new Uint8ClampedArray(width * height * 4)\n\n  for (let row = 0; row < resolution; row++) {\n    for (let col = 0; col < resolution; col++) {\n      const idx = (row * resolution + col) * 4\n      const r = cellColors[idx]\n      const g = cellColors[idx + 1]\n      const b = cellColors[idx + 2]\n      const a = cellColors[idx + 3]\n\n      const x0 = Math.round(col * cellW)\n      const y0 = Math.round(row * cellH)\n      const x1 = Math.round((col + 1) * cellW)\n      const y1 = Math.round((row + 1) * cellH)\n\n      for (let py = y0; py < y1; py++) {\n        const rowBase = py * width * 4\n        for (let px = x0; px < x1; px++) {\n          const i = rowBase + px * 4\n          out[i] = r\n          out[i + 1] = g\n          out[i + 2] = b\n          out[i + 3] = a\n        }\n      }\n    }\n  }\n\n  return { data: out, width, height }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,47 @@
+/**
+ * Any object with `data`, `width`, `height` — compatible with the browser's
+ * built-in `ImageData` as well as node-canvas and raw buffers.
+ */
+interface ImageLike {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+interface PixelateOptions {
+    /**
+     * Number of pixel cells along each axis (e.g. 32 → 32×32 grid).
+     * Any positive integer. Values larger than the image dimension are clamped.
+     */
+    resolution: number;
+    /**
+     * Color sampling algorithm per cell.
+     * - `'clean'`  — most-frequent color (sharp, graphic look) [default]
+     * - `'detail'` — average color (smoother gradients, more texture)
+     */
+    mode?: 'clean' | 'detail';
+    /**
+     * Output dimensions.
+     * - `'original'` — same size as input, cells filled with uniform color [default]
+     * - `'resized'`  — output is `resolution × resolution` pixels
+     */
+    output?: 'original' | 'resized';
+}
+interface PixelateResult {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+/**
+ * Pixelates an image synchronously.
+ *
+ * Works in both browser and Node.js (no DOM required).
+ *
+ * @example
+ * ```ts
+ * const result = pixelate(imageData, { resolution: 32 })
+ * const result = pixelate(imageData, { resolution: 64, mode: 'detail', output: 'resized' })
+ * ```
+ */
+declare function pixelate(input: ImageLike, options: PixelateOptions): PixelateResult;
+
+export { type ImageLike, type PixelateOptions, type PixelateResult, pixelate };

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Any object with `data`, `width`, `height` — compatible with the browser's
+ * built-in `ImageData` as well as node-canvas and raw buffers.
+ */
+interface ImageLike {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+interface PixelateOptions {
+    /**
+     * Number of pixel cells along each axis (e.g. 32 → 32×32 grid).
+     * Any positive integer. Values larger than the image dimension are clamped.
+     */
+    resolution: number;
+    /**
+     * Color sampling algorithm per cell.
+     * - `'clean'`  — most-frequent color (sharp, graphic look) [default]
+     * - `'detail'` — average color (smoother gradients, more texture)
+     */
+    mode?: 'clean' | 'detail';
+    /**
+     * Output dimensions.
+     * - `'original'` — same size as input, cells filled with uniform color [default]
+     * - `'resized'`  — output is `resolution × resolution` pixels
+     */
+    output?: 'original' | 'resized';
+}
+interface PixelateResult {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+/**
+ * Pixelates an image synchronously.
+ *
+ * Works in both browser and Node.js (no DOM required).
+ *
+ * @example
+ * ```ts
+ * const result = pixelate(imageData, { resolution: 32 })
+ * const result = pixelate(imageData, { resolution: 64, mode: 'detail', output: 'resized' })
+ * ```
+ */
+declare function pixelate(input: ImageLike, options: PixelateOptions): PixelateResult;
+
+export { type ImageLike, type PixelateOptions, type PixelateResult, pixelate };

package/dist/index.js

@@ -0,0 +1,118 @@
+// src/algorithms.ts
+var _freq = new Uint16Array(32768);
+var _touched = [];
+function getFrequentColor(data, width, x0, y0, x1, y1) {
+  for (let i = 0; i < _touched.length; i++) _freq[_touched[i]] = 0;
+  _touched.length = 0;
+  let maxCount = 0;
+  let bestKey = 0;
+  let transparentCount = 0;
+  let totalPixels = 0;
+  for (let py = y0; py < y1; py++) {
+    const row = py * width * 4;
+    for (let px = x0; px < x1; px++) {
+      const i = row + px * 4;
+      const a = data[i + 3];
+      totalPixels++;
+      if (a < 128) {
+        transparentCount++;
+        continue;
+      }
+      const key = data[i] >> 3 << 10 | data[i + 1] >> 3 << 5 | data[i + 2] >> 3;
+      if (_freq[key] === 0) _touched.push(key);
+      const c = ++_freq[key];
+      if (c > maxCount) {
+        maxCount = c;
+        bestKey = key;
+      }
+    }
+  }
+  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0];
+  return [(bestKey >> 10 & 31) << 3, (bestKey >> 5 & 31) << 3, (bestKey & 31) << 3, 255];
+}
+function getAverageColor(data, width, x0, y0, x1, y1) {
+  let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+  let transparentCount = 0;
+  let totalPixels = 0;
+  for (let py = y0; py < y1; py++) {
+    const row = py * width * 4;
+    for (let px = x0; px < x1; px++) {
+      const i = row + px * 4;
+      const a = data[i + 3];
+      totalPixels++;
+      aSum += a;
+      if (a < 128) {
+        transparentCount++;
+        continue;
+      }
+      rSum += data[i];
+      gSum += data[i + 1];
+      bSum += data[i + 2];
+    }
+  }
+  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0];
+  const visible = totalPixels - transparentCount;
+  return [
+    visible > 0 ? rSum / visible + 0.5 | 0 : 0,
+    visible > 0 ? gSum / visible + 0.5 | 0 : 0,
+    visible > 0 ? bSum / visible + 0.5 | 0 : 0,
+    aSum / totalPixels + 0.5 | 0
+  ];
+}
+
+// src/index.ts
+function pixelate(input, options) {
+  const { data, width, height } = input;
+  const { mode = "clean", output = "original" } = options;
+  const resolution = Math.max(1, Math.min(Math.floor(options.resolution), width, height));
+  const getColor = mode === "clean" ? getFrequentColor : getAverageColor;
+  const cellW = width / resolution;
+  const cellH = height / resolution;
+  const cellColors = new Uint8ClampedArray(resolution * resolution * 4);
+  for (let row = 0; row < resolution; row++) {
+    for (let col = 0; col < resolution; col++) {
+      const x0 = Math.round(col * cellW);
+      const y0 = Math.round(row * cellH);
+      const x1 = Math.round((col + 1) * cellW);
+      const y1 = Math.round((row + 1) * cellH);
+      const [r, g, b, a] = getColor(data, width, x0, y0, x1, y1);
+      const idx = (row * resolution + col) * 4;
+      cellColors[idx] = r;
+      cellColors[idx + 1] = g;
+      cellColors[idx + 2] = b;
+      cellColors[idx + 3] = a;
+    }
+  }
+  if (output === "resized") {
+    return { data: cellColors, width: resolution, height: resolution };
+  }
+  const out = new Uint8ClampedArray(width * height * 4);
+  for (let row = 0; row < resolution; row++) {
+    for (let col = 0; col < resolution; col++) {
+      const idx = (row * resolution + col) * 4;
+      const r = cellColors[idx];
+      const g = cellColors[idx + 1];
+      const b = cellColors[idx + 2];
+      const a = cellColors[idx + 3];
+      const x0 = Math.round(col * cellW);
+      const y0 = Math.round(row * cellH);
+      const x1 = Math.round((col + 1) * cellW);
+      const y1 = Math.round((row + 1) * cellH);
+      for (let py = y0; py < y1; py++) {
+        const rowBase = py * width * 4;
+        for (let px = x0; px < x1; px++) {
+          const i = rowBase + px * 4;
+          out[i] = r;
+          out[i + 1] = g;
+          out[i + 2] = b;
+          out[i + 3] = a;
+        }
+      }
+    }
+  }
+  return { data: out, width, height };
+}
+
+export { pixelate };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/algorithms.ts","../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Pre-allocated frequency table for frequent-color sampling.\n * 5 bits per channel (>> 3) → 32^3 = 32,768 buckets.\n * Safe because JS is single-threaded per context.\n */\nconst _freq = new Uint16Array(32768)\nconst _touched: number[] = []\n\n/**\n * Returns the most-frequent quantized color in the cell.\n * Uses a typed-array bucket table instead of Map for speed.\n */\nexport function getFrequentColor(\n  data: Uint8ClampedArray,\n  width: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n): [number, number, number, number] {\n  // Reset only buckets touched in the previous call\n  for (let i = 0; i < _touched.length; i++) _freq[_touched[i]] = 0\n  _touched.length = 0\n\n  let maxCount = 0\n  let bestKey = 0\n  let transparentCount = 0\n  let totalPixels = 0\n\n  for (let py = y0; py < y1; py++) {\n    const row = py * width * 4\n    for (let px = x0; px < x1; px++) {\n      const i = row + px * 4\n      const a = data[i + 3]\n      totalPixels++\n      if (a < 128) {\n        transparentCount++\n        continue\n      }\n      // Pack 5-bit quantized channels into a single 15-bit key\n      const key = ((data[i] >> 3) << 10) | ((data[i + 1] >> 3) << 5) | (data[i + 2] >> 3)\n      if (_freq[key] === 0) _touched.push(key)\n      const c = ++_freq[key]\n      if (c > maxCount) {\n        maxCount = c\n        bestKey = key\n      }\n    }\n  }\n\n  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0]\n\n  // Decode key back to RGB (multiply by 8 to restore approximate original range)\n  return [((bestKey >> 10) & 31) << 3, ((bestKey >> 5) & 31) << 3, (bestKey & 31) << 3, 255]\n}\n\n/**\n * Returns the average color of visible (non-transparent) pixels in the cell.\n */\nexport function getAverageColor(\n  data: Uint8ClampedArray,\n  width: number,\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n): [number, number, number, number] {\n  let rSum = 0,\n    gSum = 0,\n    bSum = 0,\n    aSum = 0\n  let transparentCount = 0\n  let totalPixels = 0\n\n  for (let py = y0; py < y1; py++) {\n    const row = py * width * 4\n    for (let px = x0; px < x1; px++) {\n      const i = row + px * 4\n      const a = data[i + 3]\n      totalPixels++\n      aSum += a\n      if (a < 128) {\n        transparentCount++\n        continue\n      }\n      rSum += data[i]\n      gSum += data[i + 1]\n      bSum += data[i + 2]\n    }\n  }\n\n  if (totalPixels === 0 || transparentCount * 2 > totalPixels) return [0, 0, 0, 0]\n\n  const visible = totalPixels - transparentCount\n  // (x + 0.5) | 0  ≡  Math.round(x) for non-negative values — avoids function call overhead\n  return [\n    visible > 0 ? (rSum / visible + 0.5) | 0 : 0,\n    visible > 0 ? (gSum / visible + 0.5) | 0 : 0,\n    visible > 0 ? (bSum / visible + 0.5) | 0 : 0,\n    (aSum / totalPixels + 0.5) | 0,\n  ]\n}\n","import { getAverageColor, getFrequentColor } from './algorithms'\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\n/**\n * Any object with `data`, `width`, `height` — compatible with the browser's\n * built-in `ImageData` as well as node-canvas and raw buffers.\n */\nexport interface ImageLike {\n  data: Uint8ClampedArray\n  width: number\n  height: number\n}\n\nexport interface PixelateOptions {\n  /**\n   * Number of pixel cells along each axis (e.g. 32 → 32×32 grid).\n   * Any positive integer. Values larger than the image dimension are clamped.\n   */\n  resolution: number\n\n  /**\n   * Color sampling algorithm per cell.\n   * - `'clean'`  — most-frequent color (sharp, graphic look) [default]\n   * - `'detail'` — average color (smoother gradients, more texture)\n   */\n  mode?: 'clean' | 'detail'\n\n  /**\n   * Output dimensions.\n   * - `'original'` — same size as input, cells filled with uniform color [default]\n   * - `'resized'`  — output is `resolution × resolution` pixels\n   */\n  output?: 'original' | 'resized'\n}\n\nexport interface PixelateResult {\n  data: Uint8ClampedArray\n  width: number\n  height: number\n}\n\n// ─── Core ────────────────────────────────────────────────────────────────────\n\n/**\n * Pixelates an image synchronously.\n *\n * Works in both browser and Node.js (no DOM required).\n *\n * @example\n * ```ts\n * const result = pixelate(imageData, { resolution: 32 })\n * const result = pixelate(imageData, { resolution: 64, mode: 'detail', output: 'resized' })\n * ```\n */\nexport function pixelate(input: ImageLike, options: PixelateOptions): PixelateResult {\n  const { data, width, height } = input\n  const { mode = 'clean', output = 'original' } = options\n\n  const resolution = Math.max(1, Math.min(Math.floor(options.resolution), width, height))\n\n  const getColor = mode === 'clean' ? getFrequentColor : getAverageColor\n  const cellW = width / resolution\n  const cellH = height / resolution\n\n  // Sample one color per cell\n  const cellColors = new Uint8ClampedArray(resolution * resolution * 4)\n\n  for (let row = 0; row < resolution; row++) {\n    for (let col = 0; col < resolution; col++) {\n      const x0 = Math.round(col * cellW)\n      const y0 = Math.round(row * cellH)\n      const x1 = Math.round((col + 1) * cellW)\n      const y1 = Math.round((row + 1) * cellH)\n      const [r, g, b, a] = getColor(data, width, x0, y0, x1, y1)\n      const idx = (row * resolution + col) * 4\n      cellColors[idx] = r\n      cellColors[idx + 1] = g\n      cellColors[idx + 2] = b\n      cellColors[idx + 3] = a\n    }\n  }\n\n  // Build output\n  if (output === 'resized') {\n    return { data: cellColors, width: resolution, height: resolution }\n  }\n\n  // output === 'original': paint each cell back at full size\n  const out = new Uint8ClampedArray(width * height * 4)\n\n  for (let row = 0; row < resolution; row++) {\n    for (let col = 0; col < resolution; col++) {\n      const idx = (row * resolution + col) * 4\n      const r = cellColors[idx]\n      const g = cellColors[idx + 1]\n      const b = cellColors[idx + 2]\n      const a = cellColors[idx + 3]\n\n      const x0 = Math.round(col * cellW)\n      const y0 = Math.round(row * cellH)\n      const x1 = Math.round((col + 1) * cellW)\n      const y1 = Math.round((row + 1) * cellH)\n\n      for (let py = y0; py < y1; py++) {\n        const rowBase = py * width * 4\n        for (let px = x0; px < x1; px++) {\n          const i = rowBase + px * 4\n          out[i] = r\n          out[i + 1] = g\n          out[i + 2] = b\n          out[i + 3] = a\n        }\n      }\n    }\n  }\n\n  return { data: out, width, height }\n}\n"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "fast-pixelizer",
+  "version": "1.0.0",
+  "description": "Fast, zero-dependency image pixelation. Works in browser and Node.js.",
+  "keywords": [
+    "pixelate",
+    "pixel-art",
+    "image",
+    "canvas",
+    "imagedata"
+  ],
+  "license": "MIT",
+  "author": "handsupmin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/handsupmin/fast-pixelizer.git"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write .",
+    "examples": "npm run build && node scripts/generate-examples.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@types/sharp": "^0.31.1",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.0.0",
+    "sharp": "^0.34.5",
+    "tsup": "^8.0.0",
+    "typescript": "~5.5.0",
+    "typescript-eslint": "^8.0.0"
+  }
+}