JavaScript image processing-adding common methods to matrices _javascript tips

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

tostring Method
The ToString method is often used as a description of the object as a string, so we define this method as an output matrix element.

Copy Code code 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 go through:

Copy Code code as follows:

Console.log (MAT);

To output the matrix.

Clone Method
In fact, we can clone operations through constructors, but still provide a way to facilitate memory and use.

Copy Code code as follows:

Mat.prototype.clone = function () {
return new Mat (This.row, This.col, This.data);
};

gets the specified element
We have two ways to get the matrix element.

Array Method
Because the mat actually holds the data as an array, the data looks like this:
R00 G00 B00 A00 R01 G01 B01 A01 ... r0n g0n b0n a0n
R10 G10 B10 A10 R11 G11 B11 A11 ... r1n g1n b1n a1n
......
Rm0 Gm0 Bm0 Am0 Rm1 Gm1 Bm1 Am1 ... RMN Gmn Bmn Amn
Where capital R, G, B, and a represent the values of each channel, and the subscript first represents the line number, and the second represents the column number. That is, line K, the G-Channel value of column J is gkj.
We can easily get to a mat type of mat, the K line, each element of the J-column Pixel 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
By using a partial reference to the buffer, we can get a partial reference to the matrix, for example, we can use this to get an array of pixels of a pixel, and change the values in the array, and the corresponding matrix data will also change; For example, we can read data in other data types. These are not achievable for the normal array. Now let's take a look at the implementation of the At method:

Copy Code code 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 ("Unsupported data type");
}
};

If you are not clear about Arraybuffer and Typedarray, you can refer to the new array in HTML5.
String type-the data type that needs to be returned. Support:
Uchar unsigned 8-bit integer
Short signed 16-bit integer
Int signed 32-bit integer
Float signed 32-bit floating-point number
Double signed 64-bit floating-point number

Vec vector Form
Vector form string spelling is: Vec + (type) + (number), such as VECB4 is 4 unsigned 8-bit integer, this is a common way to get a pixel data, for example, in order to get Mat line J, the K-column pixel data, you can use:

Copy Code code as follows:

mat.at ("Vecb4", J, K);

int X-The number of rows to get for the element in the matrix.
int Y-The number of columns to get the element in the matrix.

GetRow Method and Getcol method
Like the at approach, we can easily write a way to get a row or a column:

Copy Code code 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 Code code 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 get the specified row and the specified column method:

Copy Code code 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 Code code 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;
};

All four of these methods return an array of array<typedarray>. If you want to get this array rect line J, the elements of the K column are available:
RECT[J][K]