Imagequant bindings for JavaScript
Demo: https://imagequant-wasm.pages.dev
npm i imagequant
Need to install vite-plugin-wasm
and set it up according to it's instructions.
import { ImagequantImage, Imagequant } from "imagequant";
const file = // A file
// Get pixels/imageData of image
const bitmap = await createImageBitmap(file);
const { width, height } = bitmap;
const canvas = new OffscreenCanvas(width, height);
const context = canvas.getContext("2d");
context.drawImage(bitmap, 0, 0, width, height);
const imageData = context.getImageData(0, 0, width, height);
// Need to send data as Uint8Array to Imagequant/WASM
const uint8Array = new Uint8Array(imageData.data.buffer);
const image = new ImagequantImage(uint8Array, width, height, 0);
const instance = new Imagequant();
// Apply options
instance.set_quality(0, 5);
// Do the work
const output = instance.process(image);
const blob = new Blob([output.buffer], { type: "image/png" });
See demo/main.js for example usage.
May seem a bit verbose, but it tries to resemble the Imagequant Rust documentation.
class ImagequantImage {
constructor(data: Uint8Array, width: number, height: number, gamma: number);
}
class Imagequant {
/**
* Make an image from RGBA pixels.
* Use 0.0 for gamma if the image is sRGB (most images are).
*/
static new_image(
data: Uint8Array,
width: number,
height: number,
gamma: number
): ImagequantImage;
/**
* It's better to use `set_quality()`
*/
set_max_colors(max_colors: number): void;
/**
* Range 0-100, roughly like JPEG.
*
* If the minimum quality can't be met, the quantization will be aborted with an error.
*
* Default is min 0, max 100, which means best effort, and never aborts the process.
*
* If max is less than 100, the library will try to use fewer colors.
* Images with fewer colors are not always smaller, due to increased dithering it causes.
*/
set_quality(minimum: number, target: number): void;
/**
* 1-10.
*
* Faster speeds generate images of lower quality, but may be useful
* for real-time generation of images.
*
* The default is 4.
*/
set_speed(value: number): void;
/**
* Number of least significant bits to ignore.
*
* Useful for generating palettes for VGA, 15-bit textures, or other retro platforms.
*/
set_min_posterization(value: number): void;
/**
* Create PNG based on specified settings
*/
process(image: ImagequantImage): Uint8Array;
}
wasm-pack build --target bundler