https://github.com/stanleymasinde/wasm-image-processor
Process images offline in the browser.
https://github.com/stanleymasinde/wasm-image-processor
rust wasm-bindgen wasm-pack
Last synced: 27 days ago
JSON representation
Process images offline in the browser.
- Host: GitHub
- URL: https://github.com/stanleymasinde/wasm-image-processor
- Owner: StanleyMasinde
- License: mit
- Created: 2025-08-22T22:24:59.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-09-13T18:42:30.000Z (27 days ago)
- Last Synced: 2025-09-13T20:38:25.869Z (27 days ago)
- Topics: rust, wasm-bindgen, wasm-pack
- Language: Rust
- Homepage: https://wip-docs.vercel.app
- Size: 1.63 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# WASM Image Processor
> Process images offline in the Browser.
A high-performance image processing toolkit built with Rust and WebAssembly. Process images entirely client-side with no server uploads required.
## Features
- **Offline Processing**: All image operations happen in your browser
- **High Performance**: Powered by Rust and WebAssembly
- **No Data Transfer**: Images never leave your device
- **PWA Icon Generation**: Create complete icon sets for Progressive Web Apps
- **Multiple Formats**: Support for JPEG, PNG, WebP, and more
- **Batch Processing**: Generate multiple sizes from a single image
## Demo
Try the live demo at: [https://wasm-ip-demo.vercel.app](https://wasm-ip-demo.vercel.app)
- **Basic Resizer**: Resize images to custom dimensions
- **PWA Icon Generator**: Generate complete icon sets for web apps
## Current Features
### Image Resizing
- Resize images to any dimensions up to 5000x5000 pixels
- Maintain aspect ratio or force specific dimensions
- High-quality filtering algorithms
## Installation
```shell
npm i wasm-image-processor
```
### Usage
Include the WASM module in your web page:
```javascript
import { resize_square } from "wasm-image-processor";
// Example: resize an image uploaded via
const fileInput = document.querySelector("#fileInput")!;
fileInput.addEventListener("change", () => {
const file = fileInput.files?.[0]
if (!file) return
const reader = new FileReader()
reader.onload = () => {
const arrayBuffer = reader.result as ArrayBuffer
const uint8Array = new Uint8Array(arrayBuffer)
// Resize to 512x512
const resizedBytes = resize_square(uint8Array, 512)
// Create a new File from the resized bytes
const resizedImage = new File([resizedBytes], "resized.png", {
type: "image/png",
})
console.log("Resized image:", resizedImage)
}
reader.readAsArrayBuffer(file)
})
```
### API Reference
#### `resize_square(image_data: Vec, side: u32) -> Vec`
Resizes an image to a square with the specified side length.
**Parameters:**
- `image_data`: Image data as a byte array
- `side`: Target width/height in pixels (1-5000)
**Returns:**
- PNG-encoded image data as byte array
**Example:**
```javascript
const resizedBytes = resize_square(imageBytes, 256);
const blob = new Blob([new Uint8Array(resizedBytes)], { type: 'image/png' });
```
## Project Structure
```
wasm-image-processor/
├── src/
│ └─- lib.rs # Main Rust library
├── demo/
│ ├── index.html # Basic resizer demo
│ ├── pwa-generator.html # PWA icon generator
│ ├── pwa_image_generator.js # Generated JS bindings
│ └── pwa_image_generator_bg.wasm # Generated WASM binary
├── pkg/ # wasm-pack output
├── tests/ # Test files
├── prep-demo.sh # Copy the build to the demo folder
├── Cargo.toml
└── README.md
```
## Development
### Running Tests
```bash
# Run Rust tests
cargo test
```
### Adding New Features
The codebase is structured to easily add new image processing functions:
1. Add your function to `src/lib.rs`
2. Mark it with `#[wasm_bindgen]`
3. Rebuild with `wasm-pack build --target web`
4. Update the demo pages to use your new function
## Roadmap
**Near Term:**
- [ ] Stable API design
- [x] npm package publication
- [ ] Comprehensive documentation
- [x] CI/CD pipeline
**Future Features:**
- [ ] Image format conversion (PNG ↔ JPEG ↔ WebP)
- [ ] Image compression with quality settings
- [ ] Batch processing for multiple images
- [ ] Image filters (blur, sharpen, brightness, contrast)
- [ ] Custom crop functionality
- [ ] Image rotation and flipping
- [ ] Metadata preservation and editing
- [ ] Advanced resizing algorithms
## Browser Support
- Chrome/Edge 57+
- Firefox 52+
- Safari 11+
- Any browser with WebAssembly support
## Performance
Processing is done entirely client-side using WebAssembly, providing:
- **Fast processing**: Near-native performance
- **Privacy**: Images never leave your device
- **Offline capability**: Works without internet connection
- **Scalability**: No server resources required
## Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Built with [Rust](https://www.rust-lang.org/) and [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/)
- Image processing powered by the [image](https://github.com/image-rs/image) crate
- Inspired by the need for client-side image processing tools