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