This project is a TypeScript port of the C++ implementation of the xBRZ pixel scaling algorithm, originally created by Zenju. The low-level xBRZ part is a WASM module written in AssemblyScript.
Install the library as a dependency in your project:
npm install @kayahr/xbrz
And then use it like this:
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:
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.
Also see the images directory for examples at more scaling factors. Most of these images were taken from the Rust port of xBRZ and are used here for unit testing and comparison purposes.
| Nearest Neighbor x3 | xBRZ x3 |
|---|---|
![]() |
![]() |
| Nearest Neighbor x3 | xBRZ x3 |
|---|---|
![]() |
![]() |
| Nearest Neighbor x6 | xBRZ x6 | Nearest Neighbor x6 (Transparent) | xBRZ x6 (Transparent) |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |