Javascript图像处理

Javascript图像处理2013-10-15 博客园 Justany_WhiteSnow思路

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