Javascript image processing—smoothing processing implementation principle

Javascript image processing—smoothing processing implementation principle_javascript skills

WBOY

Release： 2016-05-16 17:45:07

Original

1568 people have browsed it

Foreword

In the last article, we explained the virtual edge of the image. This article starts with smoothing (that is, blurring) processing.

Basic Principles

Here is a direct reference to the relevant content of OpenCV 2.4 C smoothing processing and OpenCV 2.4 C edge gradient calculation:

Smoothing, also called blurring, is a simple and frequently used image processing method.

A filter
is required for smoothing. The most commonly used filter is the linear
filter, the output pixel value of the linear filtering process (for example: $g(i,j)$ ) is the weighted average of the input pixel value (for example: $f(i$ ):

　 $g(i,j) = sum_{k,l} f(i k, j l) h(k,l)$

$h(k,l)$ is called the kernel
, which is just a weighting coefficient.

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

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

Nuclear? !

nbsp;
dsds

The kernel is a fixed-size numerical array. The array has an anchor point
, which is usually located in the center of the array.

kernel example

But how does this work?

If you want to get the convolution value at a specific position of the image, you can calculate it with the following method:

Place the anchor point of the kernel on the pixel at that specific position, and at the same time, other values in the kernel coincide with each pixel in the neighborhood of the pixel; multiply each value in the kernel by the corresponding pixel value, and add the products Add; place the result on the pixel corresponding to the anchor point; repeat the above process for all pixels in the image.

The above process is represented by the 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 convolution on the edge of the image?

Before calculating the convolution, you need to create virtual pixels by copying the boundary of the source image, so that there are enough pixels at the edge to calculate the convolution. This is why the previous article required a virtual edge function.

Mean Smoothing

Mean smoothing is actually a convolution operation in which the kernel elements are all 1, and then divided by the size of the kernel. The mathematical expression is:

　 $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}$

Let’s implement the mean smoothing function blur:

Copy the code The code is as follows:

Gaussian smoothing

The most useful filter (although not the fastest). Gaussian filtering is to convolve each pixel of the input array with a Gaussian kernel

and treat the convolution sum as the output pixel value.

Referring to the one-dimensional Gaussian function, we can see that it is a function that is large in the middle and small on both sides.

So the weighting number of the Gaussian filter is large in the middle and small around it.

The two-dimensional Gaussian function is:

　 $G_{0}(x, y) = A e^{ dfrac{ -(x - mu_{x})^{2} }{ 2sigma^{2}_{x} } dfrac{ -(y - mu_{y})^{2} }{ 2sigma^{2}_{y} } }$

where

$mu$ is the mean (the position corresponding to the peak value),

$sigma$ represents the standard deviation (variable

$x$ and variables

$y$ Each has a mean and each has a standard deviation).

Here we refer to the implementation of OpenCV, but there should be room for optimization because the separation filter has not been used yet.

First we make a getGaussianKernel to return a one-dimensional array of Gaussian filters.

Copy code The code is as follows:

function getGaussianKernel(__n, __sigma){ 
var SMALL_GAUSSIAN_SIZE = 7, 
smallGaussianTab = [[1], 
[0.25, 0.5, 0.25], 
[0.0625, 0.25, 0.375, 0.25, 0.0625], 
[0.03125, 0.10937 5,0.21875, 0.28125, 0.21875, 0.109375, 0.03125] 
]; 

var fixedKernel = __n & 2 == 1 && __n <= SMALL_GAUSSIAN_SIZE && __sigma <= 0 ? smallGaussianTab[__n >& gt; 1] : 0; 

var sigmaX = __sigma > 0 ? __sigma : ((__n - 1) * 0.5 - 1) * 0.3 0.8, 
scale2X = -0.5 / (sigmaX * sigmaX), 
sum = 0; 

var i, x, t, kernel = []; 

for(i = 0; i < __n; i ){ 
x = i - (__n - 1) * 0.5; 
t = fixedKernel ? fixedKernel[i] : Math.exp(scale2X * x * x); 
kernel[i] = t; 
sum = t; 
} 

sum = 1 / sum; 

for(i = __n; i--;){ 
kernel[i] *= sum; 
} 
 
return kernel; 
};

Then through two one-dimensional arrays, a complete Gaussian kernel can be calculated, and then using the loop method used in blur, The Gaussian smoothed matrix can be calculated.

Copy code The code is as follows:

function GaussianBlur(__src, __size1, __size2, __sigma1, __sigma2, __borderType, __dst){ 
if(__src.type && __src.type == "CV_RGBA"){ 
var height = __src.row, 
width = __src.col, 
dst = __dst || new Mat(height, width, CV_RGBA), 
dstData = dst.data; 
var sigma1 = __sigma1 || 0, 
sigma2 = __sigma2 || __sigma1; 
var size1 = __size1 || Math.round(sigma1 * 6   1) | 1, 
size2 = __size2 || Math.round(sigma2 * 6   1) | 1, 
size = size1 * size2; 
if(size1 % 2 !== 1 || size2 % 2 !== 1){ 
console.error("size必须是奇数。"); 
return __src; 
} 
var startX = Math.floor(size1 / 2), 
startY = Math.floor(size2 / 2); 
var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType), 
mData = withBorderMat.data, 
mWidth = withBorderMat.col; 

var kernel1 = getGaussianKernel(size1, sigma1), 
kernel2, 
kernel = new Array(size1 * size2); 

if(size1 === size2 && sigma1 === sigma2) 
kernel2 = kernel1; 
else 
kernel2 = getGaussianKernel(size2, sigma2); 

var i, j, c, y, x; 

for(i = kernel2.length; i--;){ 
for(j = kernel1.length; j--;){ 
kernel[i * size1   j] = kernel2[i] * kernel1[j]; 
} 
} 

var newValue, nowX, offsetY, offsetI; 

for(i = height; i--;){ 
offsetI = i * width; 
for(j = width; j--;){ 
for(c = 3; c--;){ 
newValue = 0; 
for(y = size2; y--;){ 
offsetY = (y   i) * mWidth * 4; 
for(x = size1; x--;){ 
nowX = (x   j) * 4   c; 
newValue  = (mData[offsetY   nowX] * kernel[y * size1   x]); 
} 
} 
dstData[(j   offsetI) * 4   c] = newValue; 
} 
dstData[(j   offsetI) * 4   3] = mData[offsetY   startY * mWidth * 4   (j   startX) * 4   3]; 
} 
} 

}else{ 
console.error("不支持的类型"); 
} 
return dst; 
}

中值平滑

中值滤波将图像的每个像素用邻域 (以当前像素为中心的正方形区域)像素的

中值代替。

依然使用blur里面用到的循环，只要得到核中的所有值，再通过sort排序便可以得到中值，然后锚点由该值替代。

复制代码代码如下:

function medianBlur(__src, __size1, __size2, __borderType, __dst){ 
if(__src.type && __src.type == "CV_RGBA"){ 
var height = __src.row, 
width = __src.col, 
dst = __dst || new Mat(height, width, CV_RGBA), 
dstData = dst.data; 
var size1 = __size1 || 3, 
size2 = __size2 || size1, 
size = size1 * size2; 
if(size1 % 2 !== 1 || size2 % 2 !== 1){ 
console.error("size必须是奇数"); 
return __src; 
} 
var startX = Math.floor(size1 / 2), 
startY = Math.floor(size2 / 2); 
var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType), 
mData = withBorderMat.data, 
mWidth = withBorderMat.col; 

var newValue = [], nowX, offsetY, offsetI; 
var i, j, c, y, x; 

for(i = height; i--;){ 
offsetI = i * width; 
for(j = width; j--;){ 
for(c = 3; c--;){ 
for(y = size2; y--;){ 
offsetY = (y   i) * mWidth * 4; 
for(x = size1; x--;){ 
nowX = (x   j) * 4   c; 
newValue[y * size1   x] = mData[offsetY   nowX]; 
} 
} 
newValue.sort(); 
dstData[(j   offsetI) * 4   c] = newValue[Math.round(size / 2)]; 
} 
dstData[(j   offsetI) * 4   3] = mData[offsetY   startY * mWidth * 4   (j   startX) * 4   3]; 
} 
} 

}else{ 
console.error("类型不支持"); 
} 
return dst; 
};