A WebAssembly-powered library for advanced image manipulation and format conversion. This package provides tools for loading image metadata, converting images, and retrieving raw pixel data—all in the browser or Node.js environment.
It is used under the hood at re;file labs' image tools to power the different image processing features.
npm install @refilelabs/image- Load image metadata
- Retrieve raw RGBA pixel data and image properties
- Convert images between different formats
- Supports custom conversion settings
Loads the metadata of an image file.
-
file(Uint8Array): The image file to analyze. -
src_type(string): The MIME type of the source image (e.g.,image/png,image/jpeg). -
cb(Function): A callback function to report progress.
-
Metadata: An object containing image metadata (e.g., width, height, other information).
Converts an image file to raw RGBA pixel data.
-
file(Uint8Array): The image file to convert. -
src_type(string): The MIME type of the source image.
-
ImageData: An object containing raw pixel data and image properties (e.g., width, height, color depth).
convertImage(file: Uint8Array, src_type: string, target_type: string, cb: Function, convert_settings?: Settings): Uint8Array
Converts an image from one format to another.
-
file(Uint8Array): The image file to convert. -
src_type(string): The MIME type of the source image. -
target_type(string): The target MIME type (e.g.,image/webp,image/png). -
cb(Function): A callback function to report progress. -
convert_settings(Settings, optional): Settings for the conversion (e.g., for SVG).
-
Uint8Array: The converted image data.
Represents metadata of an image.
-
width(number): Image width. -
height(number): Image height. -
other(Record<string, string> | null): Additional metadata.
Represents raw image data.
-
width(number): Image width. -
height(number): Image height. -
aspect_ratio(number): Aspect ratio. -
color_depth(number): Color depth. -
pixels(number[]): Raw RGBA pixel values.
Settings specific to SVG format.
-
width(number): SVG width. -
height(number): SVG height.
Settings for conversion.
-
type:"svg"for SVG settings. - Includes all properties of
SvgSettings.
import init, { loadMetadata, getPixels, convertImage } from '@refilelabs/image';
await init();
const file = new Uint8Array(/* ... */);
const srcType = 'image/png';
const targetType = 'image/webp';
const metadata = loadMetadata(file, srcType, (progress) => console.log(`Progress: ${progress}%`));
console.log('Metadata:', metadata);
const imageData = getPixels(file, srcType);
console.log('Image Data:', imageData);
const converted = convertImage(file, srcType, targetType, (progress) => console.log(`Progress: ${progress}%`));
console.log('Converted Image:', converted);Note: When using the library in a Node.js environment, you need to initialize the wasm module as follows (see issue):
const wasmBuffer = fs.readFileSync('node_modules/@refilelabs/image/image_bg.wasm')
await init(wasmBuffer)MIT