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

npm install wasm-image-processor-rs

Usage

In a Web Worker (Recommended)

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

# Copy WASM files to public directory
cp node_modules/wasm-image-processor-rs/*.{js,wasm,d.ts} public/wasm/

Worker file (wasm-worker.ts):

// 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]);
});

Direct Usage (Browser/Node)

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

async init()

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

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

process_image(input_data, target_format, max_width, max_height, quality)

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!

// ✅ 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!