Javascript Image Processing-common methods for adding Matrices

Preface
In the previous article, we defined matrices. In this article, we will add some common methods to matrices.

ToString Method
The toString method is usually used to convert an object into a string description, so we define this method as an output matrix element.
Copy codeThe Code is as follows:
Mat. prototype. toString = function (){
Var tempData = this. data,
Text = "Mat (" + this. type + ") = {\ n ",
Num = this. col * this. channel;
For (var I = 0; I <this. row; I ++ ){
Text + = "["
For (var j = 0; j <num; j ++ ){
Text + = (tempData [I * num + j] + ",");
}
Text + = "] \ n ";
}
Text + = "}";
Return text;
};

In this way, we can use:
Copy codeThe Code is as follows:
Console. log (mat );

To output the matrix.

Clone Method
In fact, we can perform the clone operation through the constructor, but we still provide a method to facilitate memory and use.
Copy codeThe Code is as follows:
Mat. prototype. clone = function (){
Return new Mat (this. row, this. col, this. data );
};

Obtains the specified element.
We have two ways to obtain matrix elements.

Array Method
In fact, Mat stores data in arrays, and the data looks like this:
R00 G00 B00 A00 R01 G01 B01 A01 ...... R0n limit n B0n A0n
R10 G10 B10 A10 R11 G11 B11 ...... R1n G1n B1n A1n
......
Rm0 Gm0 Bm0 Am0 Rm1 Gm1 Bm1 Am1 ...... Rmn Gmn Bmn Amn
Here, uppercase R, G, B, And A represent the values of each channel, while the first subscript represents the row number and the second represents the column number. That is, the k row, and the G channel value in column j is Gkj.
We can easily obtain that for a Mat type mat, each element of the pixels in column j of row k is:
Rkj = mat. data [(k * mat. col + j) * 4 + 0]
Gkj = mat. data [(k * mat. col + j) * 4 + 1]
Bkj = mat. data [(k * mat. col + j) * 4 + 2]
Akj = mat. data [(k * mat. col + j) * 4 + 3]

Buffer partial Reference Method
Through the partial reference of Buffer, we can obtain partial references of the matrix. For example, we can use this to obtain the data array of a pixel and change the value in this array, the corresponding matrix data also changes. For example, we can read data in other data types. These cannot be implemented for common arrays. The implementation of the at method is as follows:
Copy codeThe Code is as follows:
Mat. prototype. at = function (_ type, _ x, _ y ){
Var type = _ type,
X = _ x | 0,
Y = _ y | 0,
RowLen = this. col * this. channel * this. bytes,
Len = 1;
If (type. indexOf ("Vec")>-1 ){
Var temp = _ type. match (/Vec (\ d +) ([a-z])/);
Len = parseInt (temp [1]);
Switch (temp [2]) {
Case "B ":
Type = "uchar ";
Break;
Case "s ":
Type = "short ";
Break;
Case "I ":
Type = "int ";
Break;
Case "f ":
Type = "float ";
Break;
Case "d ":
Type = "double ";
Break;
}
}
Switch (type ){
Case "uchar ":
Return new Uint8Array (this. buffer, (y * rowLen + x), len );
Break;
Case "short ":
Return new Int16Array (this. buffer, (y * rowLen + x * 2), len );
Break;
Case "int ":
Return new Int32Array (this. buffer, (y * rowLen + x * 4), len );
Break;
Case "float ":
Return new Float32Array (this. buffer, (y * rowLen + x * 4), len );
Break;
Case "doulble ":
Return new Float64Array (this. buffer, (y * rowLen + x * 8), len );
Break;
Default:
Console. error ("data type not supported ");
}
};

If you are not clear about ArrayBuffer and TypedArray, refer to the new array in HTML5.
String type-data type to be returned. Supported:
Uchar unsigned 8-digit integer
Short signed 16-digit integer
Int signed 32-bit integer
Float signed 32-bit floating point number
Double signed 64-bit floating point number

Vec Vector Form
The spelling of a vector string is: Vec + (type) + (number). For example, Vecb4 is four unsigned 8-bit integers. This is a common method to obtain pixel data, for example, to obtain the pixel data of Row j of mat and column k, you can use:
Copy codeThe Code is as follows:
Mat. at ("Vecb4", j, k );

Int x-number of rows in the matrix of the element to be obtained.
Int y-Number of columns in the matrix of the element to be obtained.

GetRow and getCol Methods
Similar to the at implementation method, we can easily write a method to obtain a row or column:
Copy codeThe Code is as follows:
Mat. prototype. getRow = function (_ I ){
Var len = this. col * this. channel,
RowLen = len * this. bytes,
I = _ I | 0;
Return new this. data. constructor (this. buffer, I * rowLen, len );
};

Copy codeThe Code is as follows:
Mat. prototype. getCol = function (_ I ){
Var len = this. col * this. channel,
RowLen = len * this. bytes,
Array = [],
I = _ I | 0;
Function getAllElement (_ constructor ){
Var row = this. row,
Channel = this. channel;
For (var j = 0; j <row; j ++ ){
Array. push (new _ constructor (this. buffer, j * rowLen + I, 1 * channel ));
}
}
GetAllElement (this. data. constructor );
Return array;
};

RowRange and colRange Methods
Similarly, we can obtain the method for specifying rows and columns:
Copy codeThe Code is as follows:
Mat. prototype. rowRange = function (_ I, _ j ){
Var len = this. col * this. channel,
RowLen = len * this. bytes,
Array = [],
I = _ I | 0,
J = _ j | this. row;
Function getAllElement (_ constructor ){
Var row = this. row;
For (var k = I; k <= j; k ++ ){
Array. push (new _ constructor (this. buffer, k * rowLen, len ));
}
}
GetAllElement (this. data. constructor );
Return array;
};

Copy codeThe Code is as follows:
Mat. prototype. colRange = function (_ I, _ j ){
Var len = this. col * this. channel,
RowLen = len * this. bytes,
Array = [],
I = _ I | 0,
J = _ j | this. col;
Function getAllElement (_ constructor ){
Var row = this. row
Channel = this. channel;
For (var k = 0; k <row; k ++ ){
Array. push (new _ constructor (this. buffer, k * rowLen + _ I, (_ j-_ I + 1) * channel ));
}
}
GetAllElement (Float64Array );
Return array;
};

The four methods return an Array of Array <TypedArray>. If you want to obtain the elements of Row j and column k of this array rect, it is available:
Rect [j] [k]