wasm-image-processor
Advanced tools
High-performance client-side image processing toolkit powered by Rust and WebAssembly
Process images offline in the Browser.
⚠️ Early Development Notice: This project is in active development. APIs may change. Use at your own risk for production applications.
A high-performance image processing toolkit built with Rust and WebAssembly. Process images entirely client-side with no server uploads required.
Try the live demo at: https://wasm-ip-demo.vercel.app
npm i wasm-image-processor
Include the WASM module in your web page:
import { resize_square } from "wasm-image-processor";
// Example: resize an image uploaded via <input type="file">
const fileInput = document.querySelector<HTMLInputElement>("#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)
})
resize_square(image_data: Vec<u8>, side: u32) -> Vec<u8>Resizes an image to a square with the specified side length.
Parameters:
image_data: Image data as a byte arrayside: Target width/height in pixels (1-5000)Returns:
Example:
const resizedBytes = resize_square(imageBytes, 256);
const blob = new Blob([new Uint8Array(resizedBytes)], { type: 'image/png' });
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
# Run Rust tests
cargo test
The codebase is structured to easily add new image processing functions:
src/lib.rs#[wasm_bindgen]wasm-pack build --target webNear Term:
Future Features:
Processing is done entirely client-side using WebAssembly, providing:
git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
High-performance client-side image processing toolkit powered by Rust and WebAssembly
The npm package wasm-image-processor receives a total of 20 weekly downloads. As such, wasm-image-processor popularity was classified as not popular.
We found that wasm-image-processor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.