@squoosh-kit/hqx 0.2.2 → 0.2.4
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.
- package/README.md +216 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
# @squoosh-kit/hqx
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/%40squoosh-kit%2Fhqx)
|
|
4
|
+
[](https://bun.sh/)
|
|
5
|
+
[](https://opensource.org/licenses/MIT) [](https://www.apache.org/licenses/LICENSE-2.0)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
7
|
+
|
|
8
|
+

|
|
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.
|
|
3
|
+
"version": "0.2.4",
|
|
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>",
|
|
@@ -47,6 +47,6 @@
|
|
|
47
47
|
"test": "bun test"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@squoosh-kit/runtime": "
|
|
50
|
+
"@squoosh-kit/runtime": "0.2.4"
|
|
51
51
|
}
|
|
52
52
|
}
|