JavaScript image Processing-Virtual edge introduction and usage _javascript tips

Source: Internet
Author: User
Preface
In the last article, we'll add some common methods to the matrix, which will explain the virtual edge of the image.

Virtual Edge
The virtual edge is to add an edge to the image according to a certain mapping relationship.
So what's the use of virtual edges? For example, it is easy to do a reflection of the effect:

Of course, this is only incidental effect, the virtual edge is mainly used in image convolution operations (such as smooth operation), due to the characteristics of convolution operations, the need to enlarge the picture to the corner of the convolution operation, this time need to preprocess the image, add virtual edge.
In a way, it is preprocessing before some pictures are processed.

Edge Type
Here refer to the edge description of the OPENCV related document:
Copy Code code as follows:

/*
Various border types, image boundaries are denoted with ' | '
* Border_replicate:aaaaaa|abcdefgh|hhhhhhh
* BORDER_REFLECT:FEDCBA|ABCDEFGH|HGFEDCB
* BORDER_REFLECT_101:GFEDCB|ABCDEFGH|GFEDCBA
* BORDER_WRAP:CDEFGH|ABCDEFGH|ABCDEFG
* BORDER_CONSTANT:IIIIII|ABCDEFGH|IIIIIII with some specified ' I '
*/

For example, Boder_reflect is for a row or a column of pixel points:
Abcdefgh
Its left virtual edge corresponds to the FEDCBA, and the right corresponds to the HGFEDCB, which is the reflection mapping. The image above is obtained by adding a border_reflect type of virtual edge to the bottom of the picture.
And border_constant is that all edges are fixed values I.
Realize
Because the border_constant is more special, it is handled separately from other types.
Copy Code code as follows:

function Copymakeborder (__SRC, __top, __left, __bottom, __right, __bordertype, __value) {
if (__src.type!= "Cv_rgba") {
Console.error ("Type not supported!") ");
}
if (__bordertype = = cv_border_constant) {
Return copymakeconstborder_8u (__SRC, __top, __left, __bottom, __right, __value);
}else{
Return copymakeborder_8u (__SRC, __top, __left, __bottom, __right, __bordertype);
}
};

This function takes an input matrix SRC, each direction to add the pixel size top,left,bottom,right, the edge type Bordertype, and an array value, that is, if the constant edge is added to the constant value.
Then we introduce an edge mapping relation function borderinterpolate.
Copy Code code as follows:

function Borderinterpolate (__p, __len, __bordertype) {
if (__p < 0 | | | __p >= __len) {
Switch (__bordertype) {
Case Cv_border_replicate:
__p = __p < 0? 0: __len-1;
Break
Case Cv_border_reflect:
Case CV_BORDER_REFLECT_101:
var Delta = __bordertype = = cv_border_reflect_101;
if (__len = 1)
return 0;
do{
if (__p < 0)
__p =-__p-1 + Delta;
Else
__p = __len-1-(__p-__len)-Delta;
}while (__p < 0 | | | __p >= __len)
Break
Case CV_BORDER_WRAP:
if (__p < 0)
__p-= ((__p-__len + 1)/__len) * __len;
if (__p >= __len)
__p%= __len;
Break
Case Cv_border_constant:
__p =-1;
Default
Error (Arguments.callee, unspport_border_type/* {line} */);
}
}
return __p;
};

The meaning of this function is that for a row of Len or a column of virtual pixel p (p is generally a negative number or greater than or equal to the original length of the row), a negative number indicates the pixel on the left side of the line, which is greater than or equal to the original length to the pixel on the right, and is mapped to which pixel point in the line. Let's take a cv_border_replicate analysis, and the expressions are:
__p = __p < 0? 0: __len-1;
That is, when P is negative (that is, the left), it maps to 0, otherwise it is mapped to len-1.
And then we'll implement the COPYMAKEBORDER_8U function:
Copy Code code as follows:

function copymakeborder_8u (__SRC, __top, __left, __bottom, __right, __bordertype) {
var i, J;
var width = __src.col,
Height = __src.row;
var top = __top,
left = __left | | __top,
right = __right | | Left
Bottom = __bottom | | Top
Dstwidth = width + left + right,
Dstheight = height + top + bottom,
Bordertype = Bordertype | | Cv_border_reflect;
var buffer = new Arraybuffer (dstheight * dstwidth * 4),
tab = new Uint32array (left + right);
for (i = 0; i < left; i++) {
Tab[i] = borderinterpolate (i-left, Width, __bordertype);
}
for (i = 0; i < right; i++) {
Tab[i + Left] = borderinterpolate (width + i, width, __bordertype);
}
var temparray, data;
for (i = 0; i < height; i++) {
Temparray = new Uint32array (buffer, (i + top) * dstwidth * 4, dstwidth);
data = new Uint32array (__src.buffer, I * Width * 4, width);
for (j = 0; J < Left; J + +)
TEMPARRAY[J] = data[tab[j]];
for (j = 0; J < right; J + +)
Temparray[j + width + Left] = Data[tab[j + left]];
Temparray.set (data, left);
}
var allarray = new Uint32array (buffer);
for (i = 0; i < top; i++) {
j = borderinterpolate (i-top, height, __bordertype);
Temparray = new Uint32array (buffer, I * dstwidth * 4, dstwidth);
Temparray.set (Allarray.subarray (j + top) * Dstwidth, (j + top + 1) * dstwidth));
}
for (i = 0; i < bottom; i++) {
j = borderinterpolate (i + height, height, __bordertype);
Temparray = new Uint32array (buffer, (i + top + height) * dstwidth * 4, dstwidth);
Temparray.set (Allarray.subarray (j + top) * Dstwidth, (j + top + 1) * dstwidth));
}
return new Mat (Dstheight, Dstwidth, new Uint8clampedarray (buffer));
}

Here you need to explain that the edges are copied in the order that you extend the left and right sides of each row first, and then expand it up and down on that basis, as shown in the figure.

We then convert the data to an unsigned 32-bit integer based on the nature of the arraybuffer, so that each unit of operation corresponds to each pixel point. What do you mean?
For example, for a pixel: RGBA, because a channel is stored with unsigned 8 as an integer, so in fact a pixel corresponds to a 32-bit storage size, because of the nature of the arraybuffer, data can be converted to any type of processing, This allows us to transform the data into an array of data for each pixel by turning the Uint32array type.
Then the copymakeconstborder_8u is easier to achieve:
Copy Code code as follows:

function copymakeconstborder_8u (__SRC, __top, __left, __bottom, __right, __value) {
var i, J;
var width = __src.col,
Height = __src.row;
var top = __top,
left = __left | | __top,
right = __right | | Left
Bottom = __bottom | | Top
Dstwidth = width + left + right,
Dstheight = height + top + bottom,
Value = __value | | [0, 0, 0, 255];
var constbuf = new Arraybuffer (Dstwidth * 4),
Constarray = new Uint8clampedarray (CONSTBUF);
Buffer = new Arraybuffer (dstheight * dstwidth * 4);
for (i = 0; i < dstwidth; i++) {
for (j = 0; J < 4; J + +) {
Constarray[i * 4 + j] = Value[j];
}
}
Constarray = new Uint32array (CONSTBUF);
var Temparray;
for (i = 0; i < height; i++) {
Temparray = new Uint32array (buffer, (i + top) * Dstwidth * 4, left);
Temparray.set (Constarray.subarray (0, left));
Temparray = new Uint32array (buffer, ((i + top + 1) * dstwidth-right) * 4, right);
Temparray.set (Constarray.subarray (0, right));
Temparray = new Uint32array (buffer, ((i + top) * Dstwidth + left) * 4, width);
Temparray.set (New Uint32array (__src.buffer, I * Width * 4, width));
}
for (i = 0; i < top; i++) {
Temparray = new Uint32array (buffer, I * dstwidth * 4, dstwidth);
Temparray.set (Constarray);
}
for (i = 0; i < bottom; i++) {
Temparray = new Uint32array (buffer, (i + top + height) * dstwidth * 4, dstwidth);
Temparray.set (Constarray);
}
return new Mat (Dstheight, Dstwidth, new Uint8clampedarray (buffer));
}

Effect chart
Cv_border_replicate

Cv_border_reflect

Cv_border_wrap

Cv_border_constant

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.