Blur
Reduces image details and sharpness by averaging or mixing neighboring pixel values.
🖼️ Image options and parameters of blur method
Blur, also known as average blur or box blur, is a simple image processing technique used to reduce noise and smooth out images. It involves replacing the color value of a pixel with the average color value of its neighboring pixels within a specified window or kernel. This process effectively blurs the image and reduces high-frequency noise.
Box blur is particularly effective in reducing salt-and-pepper noise (random black and white pixels) and minor imperfections in an image. However, it also leads to loss of finer details, so the choice of kernel size is important. More advanced blurring techniques, such as Gaussian blur or bilateral filter, are often used for better results in various applications.
Kinds of images compatible with algorithm
| Image property | What it means | Possible values |
|---|---|---|
bitDepth | number of bits per channel | [8,16] |
components | number of components | any |
alpha | is alpha channel allowed | true |
Parameters and default values
options
Options
| Property | Required | Default value |
|---|---|---|
height | yes | - |
width | yes | - |
borderType | no | reflect101 |
borderValue | no | 0 |
out | no | - |
Implementation
Here's how blur filter is implemented in ImageJS:
Select a Kernel Size: The first step is to choose the size of the kernel or window that will be used for the blurring operation. The kernel is typically a square matrix with odd dimensions, such as 3x3, 5x5, 7x7, etc. The larger the kernel, the more intense the blurring effect.
Iterate through Pixels: For each pixel in the image, the algorithm applies convolution.
Calculate Average Color: The algorithm calculates the average color value of all the pixels within the kernel.
Replace Pixel Value: The original pixel's color value is then replaced with the calculated average color value.