A lightweight web-based image editor. Supports the following features:
- blurring
- edge detection
- importing/exporting images
Blurring is implemented via Gaussian blur, and edge detection with the Sobel algorithm.
Try it out here.
The backend is built in Rust, targeting WebAssembly. The frontend is built in React + Typescript, using Vite as the build tool of choice.
Usually Gaussian blurring is implemented with a 2D Gaussian kernel, however I make use of the fact Gaussian blurring is a "separable" algorithm to split this into two iterations of blurring, each with a 1D Gaussian kernel.
Sobel edge detection is implemented with a 3x3 kernel.
Credit to Computerphile for these explanations of the algorithms.
To build Rust code targetting WASM:
cd rust-wasm
wasm-pack build --release --target web --out-dir ../src/wasm
cd ..
To install npm packages for the first time:
npm install
then to run the React application with Vite:
npm run dev
To view documentation for the Rust code:
cargo doc --no-deps --open
To run linting and formatting:
npm run format