Javascript影像處理

思路

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

canvas的瀏覽器支援情況，請參見：

http://html5test.com/compare/feature/canvas-context.html

需要注意，雖然IE9開始支援了canvas介面，但是 其getImageData擷取的資料並不是以標準的TypedArray方式儲存的，或者說IE9沒有提供對WebGL Native binary data的支援，所 以如果需要對IE9支援，下面的矩陣需要用Array的方式儲存。雖然IE9以下版本（例如IE8）有開源項目explorercanvas提供 canvas支援，但很可惜G_vmlCanvasManager並沒有提供位元影像資料擷取介面。TypedArray的相關內容可以參考HTML5的新數組， TypedArray的相關支援情況可以參見：

http://html5test.com/compare/feature/webgl-datatypes- ArrayBuffer.html

基本矩陣

在影像處理中，矩陣計算是非常重要的內容，所以我們首先來建立一個矩陣模型。

通過getImageData介面擷取的ImageData雖然具有類似矩陣的結構，但是他的結構是不可變的，不適合擴充，所以我們選 擇在Javascript中自建一個矩陣。

function Mat(__row, __col, __data, __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 imread(__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(0, 0, width, height);    return tempMat;}