YewoMhango / imageBlurJS

Browser-based image blurring

Fast Image Blurring with Javascript

This is a simple, browser-based image blurring program with all the processing done purely in client-side Javascript and WebAssembly. For further reading on how the algorithms work, refer to the references.

Usage

You can check out a live version here

1. Click on Load an Image to load an image
2. Select one of the algorithms.
3. Move the slider to change the blur radius and see the resulting image
4. You can change the radius multiple times and switch between different algorithms to compare
5. You can download the blurred image by clicking on the button that appears at its top-right corner when you hover on it

Concepts Used

• WebAssembly
• Web Workers (multithreading)

References

1. How to Blur an Image on Android
2. Stackblur (2004)
3. Stackblur and Quadratic Stackblur
4. Fastest Gaussian Blur