JavaScript image processing: Smoothing

Objective

In the previous article, we explained the virtual edge of the image, and this article began smoothing (i.e., blurring) processing.

Basic principle

This directly references the OpenCV 2.4+ C + + smoothing and OpenCV 2.4+ C + + Edge gradient calculations:

Smoothing is also called Fuzzy, which is a simple and high frequency image processing method.

A filter is needed to smooth the process. The most commonly used filter is the linear filter, the output pixel value of the linear filter processing (for example: G (I,J)) is the weighted average of the input pixel value (for example: F (i+k,j+l)):

G (i,j) = sum_{k,l} f (I+k, J+l) H (k,l)

H (k,l) is called the nucleus, it is only a weighting coefficient.

This involves an operation called "convolution," what is the convolution?

Convolution is an operation between each image block and an operator (kernel).

Nuclear?!

A nucleus is a fixed sized array of values. The array has an anchor point, which is generally located in the middle of the array.

Kernel Example

But how does this operate?

If you want the convolution value for a particular location of the image, you can calculate it in the following ways:

The kernel anchor point is placed on the pixel of the specific position, and the other values in the kernel coincide with the pixels of the pixel neighborhood;

Multiplying each value in the kernel with the corresponding pixel value and adding the product;

The result is placed on the pixel corresponding to the anchor point;

Repeat the above procedure for all pixels of the image.

The above procedure is represented by a formula as follows:

H (x,y) = Sum_{i=0}^{m_{i}-1} sum_{j=0}^{m_{j}-1} i (X+i-a_{i}, y + j-a_{j}) K (I,J)

What about the convolution at the edge of the image?

Before the convolution is computed, virtual pixels need to be created by copying the boundaries of the source image, so that the edges have enough pixels to compute the convolution. That's why the last article needed to do a virtual edge function.

Mean-value Smoothing

Mean smoothing is actually a convolution operation with a kernel element of 1, and then divided by the size of the kernel, which is represented by a mathematical expression:

Texttt{k} = frac{1}{texttt{ksize.width*ksize.height}} begin{bmatrix {1 & 1 & 1 & cdots & 1 & 1 1 & 1 & 1 & cdots & 1 & 1 Hdotsfor{6} 1 & 1 & 1 & cdots & 1 & 1 End{bmatrix}