# WASM Image Processor library

import DocButton from '~/components/webkit/DocButton.vue';

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.

<DocButton href="/en/documentation/products/azion-lib/overview/" label="Go to Azion Libraries Overview" kind="secondary" size="medium" />

---

## Usage

### loadImage

Loads an image from a URL or file path.

Example:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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'`