https://github.com/kayahr/xbrz
A high-quality image upscaling filter for creating beautiful HD representations from low-resolution images
https://github.com/kayahr/xbrz
assemblyscript image-processing image-scaling pixel-art pixel-scaling scaling typescript upscaling wasm xbrz
Last synced: 2 months ago
JSON representation
A high-quality image upscaling filter for creating beautiful HD representations from low-resolution images
- Host: GitHub
- URL: https://github.com/kayahr/xbrz
- Owner: kayahr
- License: gpl-3.0
- Created: 2026-03-21T00:24:32.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-29T07:59:40.000Z (3 months ago)
- Last Synced: 2026-03-29T10:37:13.797Z (3 months ago)
- Topics: assemblyscript, image-processing, image-scaling, pixel-art, pixel-scaling, scaling, typescript, upscaling, wasm, xbrz
- Language: TypeScript
- Homepage: https://kayahr.github.io/xbrz/
- Size: 7.86 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/funding.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# xbrz
[GitHub] | [NPM] | [JSR] | [API Doc]
This project is a TypeScript port of the [C++ implementation](https://sourceforge.net/projects/xbrz/) of the xBRZ pixel scaling algorithm, originally created by Zenju. The low-level xBRZ part is a WASM module written in [AssemblyScript](https://www.assemblyscript.org/).
## Features
* Supports scaling factors 2-6.
* Supports alpha transparencies.
* Works in Node.js and browsers.
* Performance is pretty much the same as the original C++ implementation.
* The binary WASM module is embedded in JavaScript (~20 KiB), so you don't need to care about how the browser finds and loads the WASM file.
## Usage
Install the library as a dependency in your project:
```
npm install @kayahr/xbrz
```
And then use it like this:
```typescript
import { Scaler } from "@kayahr/xbrz";
// Create a scaler for a given source image size and scale factor
const scaler = new Scaler(96, 84, 3);
// Scale the image. Source and target are RGBA pixel
// data in a Uint8ClampedArray (like `ImageData#data`)
const target = scaler.scale(source);
// The configured source and target sizes and the
// scale factor can be read from the scaler if needed:
console.log(`Source size: ${scaler.sourceWidth} x ${scaler.sourceHeight}`);
console.log(`Scale factor: ${scaler.factor}`);
console.log(`Target size: ${scaler.targetWidth} x ${scaler.targetHeight}`);
```
Note that each scaler uses a separate WASM module instance with memory created and initialized for the given source size, scale factor, and LUT mode. Each WASM module instance creates and caches a Y'CbCr lookup table for better performance. By default, this uses a 5-bit lookup table (~128 KiB), matching the Rust port. You can opt into the larger 8-bit lookup table (~64 MiB) by setting the `largeLut` option to `true`:
```typescript
const preciseScaler = new Scaler(96, 84, 3, { largeLut: true });
```
If you do lots of scaling operations with the same settings, it is highly recommended to reuse the scaler instance, especially when you use the large LUT because creating the lookup table takes time and allocates additional memory per scaler.
Also note that a scaler reuses the target array returned by the `scale` method. So when you use the same scaler to scale multiple images, process the returned target array immediately or create a copy so the content is not overwritten by the next scaling operation.
WASM memory is automatically freed once neither the scaler nor the target array returned by `scale()` (or any other view derived from the same buffer) is referenced anymore.
## Example images
Also see the [images](https://github.com/kayahr/xbrz/tree/main/src/test/images) directory for examples at more scaling factors. Most of these images were taken from the [Rust port](https://github.com/bell345/xbrz-rs) of xBRZ and are used here for unit testing and comparison purposes.
### Sample 1
Nearest Neighbor x3
xBRZ x3
### Sample 2
Nearest Neighbor x3
xBRZ x3
### Yoshi
Nearest Neighbor x6
xBRZ x6
Nearest Neighbor x6 (Transparent)
xBRZ x6 (Transparent)
[API Doc]: https://kayahr.github.io/xbrz/
[GitHub]: https://github.com/kayahr/xbrz
[NPM]: https://www.npmjs.com/package/@kayahr/xbrz
[JSR]: https://jsr.io/@kayahr/xbrz