Javascript image processing—adding common methods to matrices_javascript skills

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

toString method
toString method is usually used to convert objects into string descriptions, so we define this method as the output matrix element.

Copy code The 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 pass:

Copy the code The code is as follows:

console.log( mat);

to output the matrix.

clone method
Actually, we can perform cloning operations through the constructor, but we still provide a method to facilitate memory and use.

Copy code The code is as follows:

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

Get the specified element
We have two ways to get it Matrix elements.

Array method
Because Mat actually saves data in the form of an array, and 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 value of each channel respectively, and the first subscript represents the row number, and the second subscript represents the column number. That is, the G channel value in row k and column j is Gkj.
We can easily get that for a Mat type mat, each element of the k-th row and j-th 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
Through the partial reference of Buffer, we can get the partial reference of the matrix, such as ours You can use this to obtain a pixel data array, and if you change the value in this array, the corresponding matrix data will also change; for another example, we can read the data in other data types. These cannot be achieved with ordinary Array. Let's take a look at the implementation of the at method:

Copy code The 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("Not supported Data type");
}
};

If you are not clear about ArrayBuffer and TypedArray, you can refer to: New arrays in HTML5.
String type - the data type 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
The spelling of vector form string is: Vec (type) (number), for example, Vecb4 is 4 unsigned 8-bit integers. It is common to get a The method of pixel data, for example, to get the pixel data of row j and column k of mat, you can use:

Copy code The code is as follows:

mat.at("Vecb4", j, k);

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

getRow method and getCol method
Similar to the implementation method of at, we can easily write a method to get a certain row or column:

Copy code The 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 code The 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 also get methods for specifying rows and columns:

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

These four methods all return an array of Array. If you want to get the element of row j and column k of this array rect, you can use:
rect[j][k]