@squoosh-kit/hqx 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +216 -0
  2. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,216 @@
1
+ # @squoosh-kit/hqx
2
+
3
+ [![npm version](https://badge.fury.io/js/%40squoosh-kit%2Fhqx.svg)](https://badge.fury.io/js/%40squoosh-kit%2Fhqx)
4
+ [![Bun](https://img.shields.io/badge/Bun-000000?logo=bun&logoColor=white)](https://bun.sh/)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
6
+ [![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
7
+
8
+ ![Squoosh-Kit](https://github.com/bnowak008/squoosh-kit/blob/main/squoosh-kit-banner.webp)
9
+
10
+ ## Squoosh-Kit
11
+
12
+ Squoosh-Kit is built on a simple idea: provide a lightweight and modular bridge to the powerful, production-tested codecs from Google's Squoosh project. This package (`@squoosh-kit/hqx`) is one of those modules.
13
+
14
+ **Directly from the Source**
15
+ We don't modify the core HQX codec. The WebAssembly (`.wasm`) binary is taken directly from the official Squoosh repository builds. This means you get the exact same performance, quality, and reliability you'd expect from Squoosh.
16
+
17
+ **A Thin, Modern Wrapper**
18
+ Our goal is to provide a minimal, modern JavaScript wrapper around the codec. We handle the tricky parts—like loading WASM, managing web workers, and providing a clean, type-safe API—so you can focus on your application. The library is designed to be a thin bridge, not a heavy framework.
19
+
20
+ **Modular by Design**
21
+ We believe you should only install what you need. As a standalone package, `@squoosh-kit/hqx` allows you to add HQX pixel-art upscaling to your project without pulling in other unrelated image processing tools.
22
+
23
+ ## Installation
24
+
25
+ ```bash
26
+ bun add @squoosh-kit/hqx
27
+ # or
28
+ npm install @squoosh-kit/hqx
29
+ ```
30
+
31
+ ## Quick Start
32
+
33
+ ```typescript
34
+ import { upscale, createHqxUpscaler } from '@squoosh-kit/hqx';
35
+ import type { ImageInput } from '@squoosh-kit/hqx';
36
+
37
+ const sprite: ImageInput = {
38
+ data: spriteBuffer,
39
+ width: 16,
40
+ height: 16,
41
+ };
42
+
43
+ // Upscale 2x (16x16 → 32x32)
44
+ const upscaled2x = await upscale(sprite, { factor: 2 });
45
+
46
+ // Upscale 4x (16x16 → 64x64)
47
+ const upscaled4x = await upscale(sprite, { factor: 4 });
48
+
49
+ // For multiple sprites, use a persistent upscaler
50
+ const scaler = createHqxUpscaler('worker');
51
+ const result = await scaler(sprite, { factor: 3 });
52
+ await scaler.terminate();
53
+ ```
54
+
55
+ ## What is HQX?
56
+
57
+ HQX (High Quality Scale) is a pixel-art upscaling algorithm designed specifically for low-resolution pixel art. Unlike bilinear or bicubic scaling—which blur pixel art—HQX preserves the sharp edges and color palettes characteristic of pixel art while smoothing diagonal lines. It supports 2x, 3x, and 4x upscaling.
58
+
59
+ HQX is ideal for:
60
+
61
+ - Retro game sprites and tilesets
62
+ - Pixel art illustrations
63
+ - Low-resolution game assets that need display at higher resolutions
64
+ - Any content where sharpness matters more than photorealism
65
+
66
+ For photographic images or general resizing, see `@squoosh-kit/resize` instead.
67
+
68
+ ## Public API
69
+
70
+ Only the following exports are part of the public API and guaranteed to be stable across versions:
71
+
72
+ - `upscale(image, options?, signal?)` - Upscale a pixel-art image using HQX
73
+ - `createHqxUpscaler(mode?)` - Create a reusable upscaler function
74
+ - `ImageInput` type - Input image data structure
75
+ - `HqxOptions` type - Upscaling configuration
76
+ - `HqxUpscalerFactory` type - Type for reusable upscaler functions
77
+
78
+ ## Real-World Examples
79
+
80
+ **Upscale a spritesheet for high-DPI displays**
81
+
82
+ ```typescript
83
+ const spritesheet: ImageInput = {
84
+ data: await readFile('sprites.raw'),
85
+ width: 128,
86
+ height: 128,
87
+ };
88
+
89
+ // 2x for standard Retina, 4x for high-DPI
90
+ const retina = await upscale(spritesheet, { factor: 2 }); // 256x256
91
+ const highDpi = await upscale(spritesheet, { factor: 4 }); // 512x512
92
+ ```
93
+
94
+ **Batch upscale game assets with worker**
95
+
96
+ ```typescript
97
+ const scaler = createHqxUpscaler('worker');
98
+
99
+ try {
100
+ const upscaledAssets = await Promise.all(
101
+ sprites.map((sprite) => scaler(sprite, { factor: 2 }))
102
+ );
103
+ // Save assets...
104
+ } finally {
105
+ await scaler.terminate();
106
+ }
107
+ ```
108
+
109
+ ## API Reference
110
+
111
+ ### `upscale(image, options?, signal?)`
112
+
113
+ Upscales a pixel-art image using the HQX algorithm. The output dimensions are exactly `factor` times the input dimensions.
114
+
115
+ - `image` - `ImageInput` object with your pixel data
116
+ - `options` - (optional) `HqxOptions` — defaults to `{ factor: 2 }`
117
+ - `signal` - (optional) `AbortSignal` to cancel the operation
118
+ - **Returns** - `Promise<ImageInput>` with upscaled pixel data and updated dimensions
119
+
120
+ **Note**: `upscale()` uses a global singleton worker. For long-running applications where worker cleanup is important, use `createHqxUpscaler()` instead.
121
+
122
+ ### `createHqxUpscaler(mode?)`
123
+
124
+ Creates a reusable upscaler. More efficient for processing multiple images.
125
+
126
+ - `mode` - (optional) `'worker'` or `'client'`, defaults to `'worker'`
127
+ - **Returns** - A function with the same signature as `upscale()`
128
+
129
+ ## Cancellation Support
130
+
131
+ To cancel an upscaling operation in progress, pass an `AbortSignal`:
132
+
133
+ ```typescript
134
+ const controller = new AbortController();
135
+
136
+ const upscalePromise = upscale(sprite, { factor: 4 }, controller.signal);
137
+ setTimeout(() => controller.abort(), 5000);
138
+
139
+ try {
140
+ const result = await upscalePromise;
141
+ } catch (error) {
142
+ if (error.name === 'AbortError') {
143
+ console.log('Upscaling was cancelled');
144
+ }
145
+ }
146
+ ```
147
+
148
+ ## Input Validation
149
+
150
+ All inputs are automatically validated before processing:
151
+
152
+ ```typescript
153
+ // Will throw TypeError: image must be an object
154
+ await upscale(null, { factor: 2 });
155
+
156
+ // Will throw TypeError: image.data must be Uint8Array or Uint8ClampedArray
157
+ await upscale({ data: [0, 0, 0, 255], width: 16, height: 16 }, { factor: 2 });
158
+
159
+ // Will throw RangeError: image.data too small
160
+ await upscale(
161
+ { data: new Uint8Array(100), width: 64, height: 64 },
162
+ { factor: 2 }
163
+ );
164
+ ```
165
+
166
+ ### Package Size
167
+
168
+ **Size breakdown:**
169
+
170
+ - JavaScript code: ~4-6KB gzipped
171
+ - TypeScript definitions: ~2KB
172
+ - WASM binary: ~15-20KB gzipped
173
+
174
+ ### Worker Cleanup
175
+
176
+ When using worker mode (`createHqxUpscaler('worker')`), clean up when done:
177
+
178
+ ```typescript
179
+ const scaler = createHqxUpscaler('worker');
180
+
181
+ try {
182
+ const upscaled = await scaler(sprite, { factor: 2 });
183
+ } finally {
184
+ await scaler.terminate();
185
+ }
186
+ ```
187
+
188
+ ### `HqxOptions`
189
+
190
+ ```typescript
191
+ type HqxOptions = {
192
+ factor?: 2 | 3 | 4; // Upscaling factor (default: 2)
193
+ };
194
+ ```
195
+
196
+ - `2` — 2x upscale (e.g., 16×16 → 32×32)
197
+ - `3` — 3x upscale (e.g., 16×16 → 48×48)
198
+ - `4` — 4x upscale (e.g., 16×16 → 64×64)
199
+
200
+ ## Performance Tips
201
+
202
+ - **Use workers for UI apps** - Keeps the interface responsive while upscaling large spritesheets
203
+ - **Use client mode for servers** - Avoids worker overhead for batch processing
204
+ - **HQX is not for photos** - For photographic images, use `@squoosh-kit/resize` with lanczos3 or mitchell
205
+ - **Factor 2 is fastest** - Higher factors process more pixels; start with 2x unless you specifically need 3x or 4x
206
+
207
+ ## Works With
208
+
209
+ - **Bun** - First-class support, fastest performance
210
+ - **Node.js** - Works great in server environments
211
+ - **Browsers** - Full Web Worker support for responsive UIs
212
+ - **TypeScript** - Complete type definitions included
213
+
214
+ ## License
215
+
216
+ MIT - use it freely in your projects
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@squoosh-kit/hqx",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "type": "module",
5
5
  "description": "HQX upscaler codec for squoosh-kit, providing wasm-bindgen-based image upscaling.",
6
6
  "author": "Bartosz Nowak <bnowak008@gmail.com>",