国产成人精品无码播放,日韩精品亚洲专在线电影,亚洲欧美牲交

Javascript圖像處理——矩陣基本方法

2012-12-26 08:52 Justany_WhiteSnow 閱讀(6748) 評論(4) 收藏舉報

上一篇文章，我們定義了矩陣，這篇文章我們來給矩陣添加一些常用方法。

前言

上一篇文章，我們定義了矩陣，這篇文章我們來給矩陣添加一些常用方法。

toString方法

toString方法通常用作將對象轉(zhuǎn)成字符串描述，所以我們將這一方法定義為輸出矩陣元素。

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

實際上，我們可以通過構(gòu)造函數(shù)進(jìn)行克隆操作，不過依然提供一個方法來方便記憶、使用。

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

獲取指定元素

我們有兩種方法獲取矩陣元素。

數(shù)組方法

由于實際上Mat是以數(shù)組形式保存數(shù)據(jù)的，而數(shù)據(jù)看起來是這樣的：

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分別代表各通道的數(shù)值，而下標(biāo)第一個表示行號，第二個表示列號。即第k行，第j列的G通道數(shù)值就是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的部分引用，我們可以得到矩陣的部分引用，比如我們可以利用這個來獲取一個像素點的數(shù)據(jù)數(shù)組，而改變這個數(shù)組中的值，相應(yīng)的矩陣數(shù)據(jù)也會改變；再比如我們可以以其他數(shù)據(jù)類型的方式讀取數(shù)據(jù)。而這些對于普通Array是不能實現(xiàn)的。下面我們來看一下at方法的實現(xiàn)：

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("不支持?jǐn)?shù)據(jù)類型");
    }

};

如果你對ArrayBuffer和TypedArray還不太清楚，可以參考：HTML5 中的新數(shù)組。

String type - 需要返回的數(shù)據(jù)類型。支持：

uchar 無符號8位整數(shù)

short 有符號16位整數(shù)

int 有符號32位整數(shù)

float 有符號32位浮點數(shù)

double 有符號64位浮點數(shù)

Vec 向量形式

　　向量形式字符串拼寫是：Vec + （類型）+ （個數(shù)），例如Vecb4就是4個無符號8位整數(shù)，這是常見的得到一個像素點數(shù)據(jù)的方法，例如為了得到mat第j行，第k列的像素數(shù)據(jù)，可以使用：
mat.at("Vecb4", j, k);
int x - 要獲取的元素在矩陣的行數(shù)。

int y - 要獲取的元素在矩陣的列數(shù)。

getRow方法和getCol方法

類似于at的實現(xiàn)方法，我們可以很容易寫出獲取某一行或者某一列的方法：

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>的數(shù)組。如果要獲取這個數(shù)組rect第j行，第k列的元素，則可用：

rect[j][k]

系列目錄

Javascript圖像處理系列

參考資料

Basic Structures

刷新頁面返回頂部

(1 << -1) - 1 突破極限

Javascript圖像處理——矩陣基本方法

系列目錄

About

(1 &lt;&lt; -1) - 1 突破極限

Javascript圖像處理——矩陣基本方法

系列目錄

About

(1 << -1) - 1 突破極限