Wasm Studio is a professional-grade, browser-based image processing suite that leverages the power of C++ and WebAssembly to deliver near-native performance directly in your browser. Designed for high fidelity and privacy, all processing happens locally on your device.
- 🚀 Near-Native Speed: Core image processing logic is written in C++ and compiled to WebAssembly (Wasm), ensuring sub-millisecond pixel manipulation.
- 🎯 Precision Chroma Key: Advanced background removal using Euclidean distance thresholding.
- ⚖️ Eye-Dropper Tool: Click anywhere on the image canvas to instantly select the target background color with pixel-perfect accuracy.
- 📦 Batch Processing: Upload up to 50 images at once and process them in a single click with automated workflows.
- ⚡ Zero-Copy Memory: Efficient memory management using the Wasm linear heap, minimizing overhead between JavaScript and the C++ engine.
- 📸 High-Resolution Support: Handles images up to 6000px while preserving original resolution, DPI, and aspect ratio.
- 🌈 Color Enhancement: Targeted color range adjustments to boost saturation and vibrancy without affecting the entire image.
- 🛡️ 100% Privacy: Your images never leave your computer. No servers, no tracking—just pure client-side processing.
- 📁 Multi-Format Export: Download processed images as transparent PNGs individually or as a compressed ZIP archive for batch workflows.
- 🔄 Settings Sync: Apply fine-tuned removal settings from one image to the entire batch instantly.
| Layer | Technology |
|---|---|
| Engine | C++17 (Optimized with Emscripten) |
| Runtime | WebAssembly (Linear Memory/SIMD ready) |
| Frontend | TypeScript, Vite |
| Styling | Tailwind CSS (Modern Glassmorphism Aesthetics) |
| Fonts | Outfit & JetBrains Mono |
- Node.js (Latest LTS recommended)
- Emscripten SDK (emsdk): Only needed for modifying the C++ core.
# Clone the repository
git clone https://github.com/codewithnuh/img-processor.git
cd img-processor
# Install dependencies
npm install# Compile C++ to WebAssembly (Requires emsdk)
npm run compile-wasm
# Start development server
npm run devcpp/processor.cpp: High-performance pixel manipulation routines.src/wasm-bridge.ts: Memory management and TypeScript layer for Wasm interaction.src/main.ts: Reactive UI logic, Canvas management, and batch queue orchestration.public/: Compiled Wasm binaries, workers, and static assets.
The project is optimized for Vercel. Since Wasm binaries are static assets, deployment is straightforward:
- Compile the Wasm binary locally (
npm run compile-wasm). - Ensure
public/processor.jsandpublic/processor.wasmare committed to your repository. - Connect your repository to Vercel and use the Vite preset.
Build by Noor ul hassan with love and with help of AI.
This project is licensed under the MIT License - see the LICENSE file for details.