/imageBlurJS

Browser-based image blurring

Primary LanguageJavaScript

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.

Please note that the Basic Box Blur is so slow that it can cause your browser to freeze, especially for higher blur radius values and for bigger images. It is mainly there to demonstrate how poorly a naive implementation can perform. Ideally, you should only use it with a small blur radius, and the image shouldn't be too big.

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

References

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