WASM Image Processor library

Explore the `WASM Image Processor` library for efficient image processing using WebAssembly.

The Azion WASM Image Processor Library provides functions to process images using WebAssembly. This library allows you to load, resize, and retrieve images in various formats efficiently.

Go to Azion Libraries Overview

Usage

loadImage

Loads an image from a URL or file path.

Example:

import { loadImage } from 'azion/wasm-image-processor';

import type { WasmImage } from 'azion/wasm-image-processor';

const image: WasmImage = await loadImage('https://example.com/image.jpg');

Parameters:

Parameter	Type	Description
pathOrURL	string	The URL or file path of the image to be loaded.

Returns:

Return Type	Description
`Promise<WasmImage>`	A promise that resolves with a `WasmImage` instance.

resize

Resizes the loaded image.

Example:

import { loadImage } from 'azion/wasm-image-processor';

import type { WasmImage } from 'azion/wasm-image-processor';

const image: WasmImage = await loadImage('https://example.com/image.jpg');

const resizedImage: WasmImage = image.resize(0.5, 0.5);

Parameters:

Parameter	Type	Description
`width`	`number`	The new width of the image.
`height`	`number`	The new height of the image.
`usePercent?`	`boolean`	Whether to use percentages for resizing. Default value: `true`.

Returns:

Return Type	Description
`WasmImage`	A new `WasmImage` instance with the resized image.

getImageResponse

Retrieves the processed image in the specified format.

Example:

import { loadImage } from 'azion/wasm-image-processor';

import type { WasmImage, SupportedImageFormat } from 'azion/wasm-image-processor';

const image: WasmImage = await loadImage('https://example.com/image.jpg');

const imageResponse: Response = image.getImageResponse('jpeg' as SupportedImageFormat);

console.log(imageResponse);

Parameters:

Parameter	Type	Description
`format`	`SupportedImageFormat`	The format of the image. Example: `'jpeg'`, `'png'`, `'webp'`.
`quality?`	`number`	The quality of the image (for `'jpeg'`). Default value: `100.0`.

Returns:

Return Type	Description
`Response`	The response object containing the processed image.

clean

Cleans up the image data to free memory.

Example:

import { loadImage } from 'azion/wasm-image-processor';

import type { WasmImage, SupportedImageFormat } from 'azion/wasm-image-processor';

const image: WasmImage = await loadImage('https://example.com/image.jpg');

image.clean();

Returns:

Return Type	Description
`void`	No return value.

Types

These are the types used by the WASM Image Processor library and its methods:

WasmImage

An interface representing a wrapped PhotonImage with additional methods for image processing.

Properties:

Property	Description
`image`	The PhotonImage instance.

Methods:

Method	Parameters	Return Type	Description
`width`	-	`number`	Gets the width of the image.
`height`	-	`number`	Gets the height of the image.
`resize`	`width: number`, `height: number`, `usePercent?: boolean`	`WasmImage`	Resizes the image.
`getImageResponse`	`format: SupportedImageFormat`, `quality?: number`	`Response`	Gets the processed image as a response.
`clean`	-	`void`	Cleans up the image data.

SupportedImageFormat

A type representing supported image formats. The possible values are:

'webp'
'jpeg'
'png'