JavaScript image processing-edge gradient computing function _javascript techniques

Preface

In the previous article, we explained the expansion and corrosion function in image processing, which will do the edge gradient calculation function.

Edge of Image

How is the edge of the image represented mathematically?

On the edge of the image, the adjacent pixel value should be significantly changed. In mathematics, the derivative is a means of changing the speed. The large variation of the gradient value indicates a significant change in the content of the image.

With a more vivid image to explain, suppose we have a one-dimensional graph. The "Jump" of the grayscale value in the following figure indicates the existence of the edge:

　　　　

By using a derivative of the first order we can see more clearly the existence of the edge "Jump" (shown here as the peak value):

　　　　

From this we can conclude that the edge can be found by locating the gradient value greater than the phase element of the neighborhood.

Approximate gradient

For example, the kernel is 3 o'clock.

The approximate derivative is first computed for the x direction:

The approximate derivative is then computed for the y direction:

Then compute the gradient:

Of course you can also write:

function Implementation

Copy Code code as follows:

var Sobel = function (__src, __xorder, __yorder, __size, __bordertype, __DST) {
(__src && (__xorder ^ __yorder)) | | Error (Arguments.callee, is_undefined_or_null/* {line} */);
if (__src.type && __src.type = = "Cv_gray") {
var kernel1,
Kernel2,
Height = __src.row,
width = __src.col,
DST = __DST | | New Mat (height, width, cv_16i, 1),
Dstdata = Dst.data
Size = __size | | 3;
switch (size) {
Case 1:
size = 3;
Case 3:
if (__xorder) {
kernel = [-1, 0, 1,
-2, 0, 2,
-1, 0, 1
];
}else if (__yorder) {
kernel = [-1,-2,-1,
, 0, 0,
, 2, 1
];
}
Break
Case 5:
if (__xorder) {
kernel = [-1,-2, 0, 2, 1,
-4,-8, 0, 8, 4,
-6,-12, 0, 12, 6,
-4,-8, 0, 8, 4,
-1,-2, 0, 2, 1
];
}else if (__yorder) {
kernel = [-1,-4,-6,-4,-1,
-2, -8,-12,-8,-2,
, 0, 0, 0, 0,
, 8, 12, 8, 2,
, 4, 6, 4, 1
];
}
Break
Default
Error (Arguments.callee, unspport_size/* {line} */);

}

Gray216ic1filter (__src, size, height, width, kernel, dstdata, __bordertype);

}else{
Error (Arguments.callee, unspport_data_type/* {line} */);
}
return DST;
};

This provides only the kernel size of 3 and 5 Sobel operators, mainly because 7 or more of the kernel computation is slower.
Outputs a single channel 16-bit signed integer matrix.

Copy Code code as follows:

function Gray216ic1filter (__src, size, height, width, kernel, dstdata, __bordertype) {
var start = size >> 1;

var Withbordermat = Copymakeborder (__src, start, start, 0, 0, __bordertype);

var mdata = Withbordermat.data,
Mwidth = Withbordermat.col;

var i, J, y, X, C;
var newvalue, Nowx, OffsetY, Offseti;

for (i = height; i--;) {
Offseti = i * width;
for (j = width; j--;) {
newvalue = 0;
for (y = size; y--;) {
OffsetY = (y + i) * mwidth;
for (x = size; x--;) {
NOWX = x + j;
NewValue + = (mdata[offsety + nowx] * kernel[y * size + x]);
}
}
Dstdata[j + Offseti] = newvalue;
}
}
}

Then the kernel and the matrix to the filter processing, OK.

The reason for this filter to be independent is that it can be used for other similar computational edge functions, such as Laplacian and ScHARR operators.

Convert to unsigned 8-bit integer

Since the Sobel operator calculates a 16-bit signed integer that cannot be displayed as a picture, we need a function to convert it to an unsigned 8-bit integer matrix.

The Convertscaleabs function is to take the absolute value of each element, and then put it into the Int8array array, because the number greater than 255 will automatically turn to 255, and less than 0 will automatically turn to 0, so we do not need to do a function to take charge of this work.

Copy Code code as follows:

function Convertscaleabs (__SRC, __DST) {
__SRC | | Error (Arguments.callee, is_undefined_or_null/* {line} */);
var height = __src.row,
width = __src.col,
Channel = __src.channel,
SData = __src.data;

if (!__DST) {
if (channel = = 1)
DST = new Mat (height, width, cv_gray);
else if (channel = 4)
DST = new Mat (height, width, cv_rgba);
Else
DST = new Mat (height, width, cv_8i, channel);
}else{
DST = __DST;
}

var ddata = Dst.data;

var i, J, C;

for (i = height; i--;) {
for (j = width * Channel; j--;) {
Ddata[i * Width * channel + j] = Math.Abs (sdata[i * Width * channel + j]);
}
}

return DST;
}

combine values by scale

We also need a function to stack the x direction gradient computed value and the y direction gradient computed value.

Copy Code code as follows:

var addweighted = function (__src1, __alpha, __src2, __beta, __gamma, __DST) {
(__src1 && __src2) | | Error (Arguments.callee, is_undefined_or_null/* {line} */);
var height = __src1.row,
width = __src1.col,
Alpha = __alpha | | 0,
Beta = __beta | | 0,
Channel = __src1.channel,
Gamma = __gamma | | 0;
if (height!== __src2.row | | width!== __SRC2.COL | | Channel!==) {
Error (Arguments.callee, "SRC2 must be the same size and channel number as src1!" /* {line} */);
return null;
}

if (!__DST) {
if (__src1.type.match (/cv\_\d+/))
DST = new Mat (height, width, __src1.depth (), channel);
Else
DST = new Mat (height, width, __src1.depth ());
}else{
DST = __DST;
}

var ddata = Dst.data,
S1data = __src1.data,
S2data = __src2.data;

var i;

for (i = height * Width * Channel i--;)
Ddata[i] = __alpha * S1data[i] + __beta * S2data[i] + gamma;

return DST;
};

This function is very simple, in fact, only the corresponding elements of the two matrices are added in a fixed proportion. Effect Chart