Javascript影像處理思路及實作程式碼_javascript技巧

想法
HTML5的canvas提供了getImageData介面來取得canvas中的數據，所以我們能夠先用drawImage介面將圖片畫在canvas上然後再透過getImageData得到圖片資料矩陣。

需要注意，雖然IE9開始支持了canvas接口，但是其getImageData獲取的數據並不是以標準的TypedArray方式存儲的，或者說IE9沒有提供對WebGL Native binary data的支持，所以如果需要對IE9支持，下面的矩陣需要用Array的方式保存。雖然IE9以下版本（例如IE8）有開源專案explorercanvas提供canvas支持，但很可惜G_vmlCanvasManager並沒有提供點陣圖資料取得介面。 TypedArray的相關內容可以參考HTML5的新陣列

基本矩陣
在影像處理中，矩陣計算是非常重要的內容，所以我們首先來建立一個矩陣模型。
透過getImageData介面取得的ImageData雖然具有類似矩陣的結構，但是他的結構是不可變的，不適合擴展，所以我們選擇在Javascript中自建一個矩陣。

複製程式碼 程式碼如下:

function Mat(__row, __col, __col, __buffer)
this.row = __row || 0;
this.col = __col || 0;
this.channel = 4;
this.buffer = __buffer || new ArrayBuffer(__row * __col * 4);
this.data = new Uint8ClampedArray(this.buffer);
__data && this.data.set(__data);
this.bytes = 1;
this.type = "CV_RGBA ";
}

row - 代表矩陣的行數
col - 代表矩陣的列數
channel - 代表通道數量，因為透過getImageData取得的圖片資料是以RGBA色彩空間進行描述的，即有Red（紅）、Green（綠）、Blue（藍）和Alpha（不透明度）四個通道。
buffer - 資料所用的ArrayBuffer引用。
data - 圖片的Uint8ClampedArray陣列資料。
bytes - 每個資料單位佔用位元組，因為是uint8資料類型，所以佔用位元組數為1。
type - 資料型態是CV_RGBA。
圖片資料轉成矩陣的方法

複製程式碼 程式碼如下:

程式碼如下:


function read (__image){
var width = __image.width,
height = __image.height;
iResize(width, height);
iCtx.drawImage(__image, 0, 0); var imageData = iCtx.getImageData(0, 0, width, height),
tempMat = new Mat(height, width, imageData.data);
imageData = null;
iCtx.clearRect(0tx. , width, height);

return tempMat;
}

注意：這裡的__image指的是Image對象，不是字串URL。因為瀏覽器中Image的讀取是一個非同步過程，並不能立刻傳回對應的Mat對象，所以這個函數要這樣使用： 複製程式碼

程式碼如下:


var img = new Image();
img.onload = function(){
var myMat = cv.imread(img); 🎜>};

img.src = "1.jpg";

iCtx和iResize方法是一個全域變量，允許給其它函數公用： 複製程式碼

程式碼如下:


var iCanvas = document.createElement("canvas"),
iCtx = iCanvas.Context "2d");
function iResize(__width, __height){
iCanvas.width = __width;
iCanvas.height = __height;

}
讓我們來看看drawImage方法
：
用途
在canvas上繪製一張圖片。
語法
context.drawImage(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidthth,sy,swidth ,sheight,x,y,width,height);
範例
還有getImageData方法：
用途
取得canvas中的影像資料。
資料是以RGBA色彩空間回傳的，即：
R - 紅色通道大小
G - 綠色通道大小
B - 藍色通道大小
A - 不透明程度大小
語法
context.getImageData(x,y,width,height);
範例

複製程式碼

複製程式碼



複製程式碼

複製程式碼複製程式碼 程式碼如下 red = imgData.data[0]; green = imgData.data[1]; blue = imgData.data[2]; alpha = imgData.data [3];
矩陣轉成影像資料的方法
經過處理後的矩陣，需要一個方法變成ImageData，然後我們就可以透過putImageData方法，在canvas上繪製經過處理的影像了。

複製程式碼 程式碼如下:

function RGBA2ImageData(__imgidage __imgMat.col,
height = __imgMat.row,
imageData = iCtx.createImageData(width, height);
imageData.data.set(__imgMat.data)
}

我們來看看putImageData方法
： 用途透過影像數據，在canvas上繪製影像。
語法
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
將彩色圖轉換成灰階圖
最後我們進行一個簡單的色彩空間變換，將影像從RGBA轉成GRAY。

複製程式碼 程式碼如下:

function cvcor(__src){ var row = __src.row,
col = __src.col;
var dst = new Mat(row, col);
data = dst.data,
data2 = __src.data;
var pix1, pix2, pix = __src.row * __src.col * 4;
while (pix){
data[pix - = 4] = data[pix1 = pix 1] = data[pix2 = pix 2] = (data2[pix] * 299 data2[pix1] * 587 data2[pix2] * 114) / 1000;
data[pix 3 ] = data2[pix 3];
}
}else{
return src;
}
return dst;
}



}
}



參考OpenCV文件中的轉換公式： RGBA to Gray: Y Gray to RGBA: R 我們可以得到RGBA to GRAY（指的是擁有4個通道）對應映射關係應該為： RGBA to RGBA(GRAY): R1 = G1 = B1