Javascript图像处理——矩阵基本方法

前言

上一篇文章，我们定义了矩阵，这篇文章我们来给矩阵添加一些常用方法。

 

toString方法

toString方法通常用作将对象转成字符串描述，所以我们将这一方法定义为输出矩阵元素。

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;
};

这样，我们就可以通过：

console.log(mat);

来输出矩阵了。

 

clone方法

实际上，我们可以通过构造函数进行克隆操作，不过依然提供一个方法来方便记忆、使用。

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

 

获取指定元素

我们有两种方法获取矩阵元素。

• 数组方法

由于实际上Mat是以数组形式保存数据的，而数据看起来是这样的：

R₀₀  G₀₀  B₀₀  A₀₀  R₀₁  G₀₁  B₀₁  A_{01  ……}  R_0n  G_0n  B_0n  A_0n

R₁₀  G₁₀  B₁₀  A₁₀  R₁₁  G₁₁  B₁₁  A_{11  ……}  R_1n  G_1n  B_1n  A_1n

_……

R_m0  G_m0  B_m0  A_m0  R_m1  G_m1  B_m1  A_{m1  ……}  R_mn  G_mn  B_mn  A_mn

其中大写R、G、B、A分别代表各通道的数值，而下标第一个表示行号，第二个表示列号。即第k行，第j列的G通道数值就是G_kj。

我们很容易得到对于一个Mat类型的mat来说，第k行，第j列像素的每个元素分别是：

R_kj = mat.data[(k * mat.col + j) * 4 + 0]

G_kj = mat.data[(k * mat.col + j) * 4 + 1]

B_kj = mat.data[(k * mat.col + j) * 4 + 2]

A_kj = mat.data[(k * mat.col + j) * 4 + 3]

• Buffer部分引用方法

通过Buffer的部分引用，我们可以得到矩阵的部分引用，比如我们可以利用这个来获取一个像素点的数据数组，而改变这个数组中的值，相应的矩阵数据也会改变；再比如我们可以以其他数据类型的方式读取数据。而这些对于普通Array是不能实现的。下面我们来看一下at方法的实现：

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("不支持数据类型");
    }

};

如果你对ArrayBuffer和TypedArray还不太清楚，可以参考：HTML5 中的新数组。

String type - 需要返回的数据类型。支持：

1. uchar 无符号8位整数
2. short 有符号16位整数
3. int 有符号32位整数
4. float 有符号32位浮点数
5. double 有符号64位浮点数
6. Vec 向量形式

　　向量形式字符串拼写是：Vec + （类型）+ （个数），例如Vecb4就是4个无符号8位整数，这是常见的得到一个像素点数据的方法，例如为了得到mat第j行，第k列的像素数据，可以使用：

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

int x - 要获取的元素在矩阵的行数。

int y - 要获取的元素在矩阵的列数。

 

getRow方法和getCol方法

类似于at的实现方法，我们可以很容易写出获取某一行或者某一列的方法：

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);
};

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和colRange方法 

类似的，我们也可以得到指定行和指定列的方法：

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;
};

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;
};

这四种方法返回的都是一种Array<TypedArray>的数组。如果要获取这个数组rect第j行，第k列的元素，则可用：

rect[j][k]

 

系列目录

Javascript图像处理系列

 

参考资料

Basic Structures