wasm-image-processor-rs

Fast WebAssembly-based image processor built with Rust. Optimized for client-side image processing with WebP and JPEG support. Perfect for Web Workers!

Features

- ✨ Fast WASM processing - Built with Rust for maximum performance
- 🖼️ WebP and JPEG output - Modern and universal formats
- 📐 Smart resizing - Preserves aspect ratio automatically
- 🎯 Quality control - Adjustable compression quality
- 🚀 Web Worker optimized - No blocking of main thread
- 📦 Small bundle - Only ~545KB

Installation

``bash
npm install wasm-image-processor-rs
`

Usage

$3

Important: For Web Workers, copy the package files to your public/ directory so they can be served:

`bash


Copy WASM files to public directory


cp node_modules/wasm-image-processor-rs/*.{js,wasm,d.ts} public/wasm/
`

Worker file (wasm-worker.ts):

`typescript
// Import from your public directory
let wasmModule: any = null;

self.addEventListener('message', async (event) => {
const { inputBuffer, format, maxWidth, maxHeight, quality } = event.data;

// Initialize WASM on first use
if (!wasmModule) {
const module = await import('/wasm/image_processor.js');
await module.default(); // Initialize WASM
wasmModule = module;
}

const inputArray = new Uint8Array(inputBuffer);
const result = wasmModule.process_image(
inputArray,
format, // 'webp' or 'jpeg'
maxWidth, // e.g., 1200
maxHeight, // e.g., 800
quality // 0-100
);

// Access properties (not methods!)
const data = result.data; // Uint8Array
const width = result.width; // number
const height = result.height; // number

self.postMessage({
buffer: data.buffer,
width,
height,
size: data.length
}, [data.buffer]);
});
`

$3

`typescript
import init, { process_image } from 'wasm-image-processor-rs';

// Initialize WASM (async, only needed once)
await init();

// Process an image
const inputData = new Uint8Array(imageBuffer);
const result = process_image(
inputData,
'webp', // 'webp' or 'jpeg'
1200, // max width
800, // max height
80 // quality (0-100)
);

console.log('Processed:', result.data.length, 'bytes');
console.log('Dimensions:', result.width, 'x', result.height);
`

API

$3

Initialize the WASM module. Must be called before using process_image.

`typescript
import init from 'wasm-image-processor-rs';
await init();
`

$3

Process and resize an image.

Parameters:
- input_data: Uint8Array - Input image bytes (JPEG, PNG, WebP)
- target_format: 'webp' | 'jpeg' - Output format
- max_width: number - Maximum width (preserves aspect ratio)
- max_height: number - Maximum height (preserves aspect ratio)
- quality: number - Quality level (0-100, higher is better)

Returns: ProcessedImage object with properties:
- data: Uint8Array - Output image bytes
- width: number - Output image width
- height: number - Output image height

Note: Access these as properties, not methods!

`typescript
// ✅ Correct
const bytes = result.data;
const w = result.width;

// ❌ Wrong
const bytes = result.data(); // This will fail!
``

Performance

- First image: ~1-2 seconds (WASM initialization)
- Subsequent images: ~100-200ms per image
- Bundle size: ~545KB (WASM + JS)

Supported Formats

Input: JPEG, PNG, WebP
Output: WebP, JPEG

License

MIT

Contributing

Issues and PRs welcome!