Gaussian blur Demo

The demo shows how the Gaussian blur works on an image or video. This operator is one of the main noise reduction techniques in image analysis and has many applications.

Gaussian blur app

User Interface

Generic option

See our online test gallery to learn how to use the generic options.

Configure the filter

This demo application has the following UI controls to help configure the filter:

  • Noise – simple noise generator. A higher value means more noise to the image
  • Sigma – controls the standard deviation of the Gaussian kernels. The higher the value, the stronger the effect of the filter.

How does Gauss works?

The algorithm in short can be described with the following steps:

  • The tool loads an image into memory using HTML Canvas element.
  • Then the application apply a fast Gaussian convolution via WebGL shader.
  • We use the gaussian separable property to apply the convolution in two steps: horizontal and vertical
  • Finally, the application renders the resulting texture onto a 2D Canvas element

The above steps are implemented as a part of our open source image analysis library FivekoGFX.

Image Analysis Demo Gallery