数字图像处理实验报告(一)

1.实验目的

使用javascript读取图像文件并显示出来（结合canvas）2.实验内容

1)加载图像文件，通过Canvas读取图像的像素值并存入矩阵（或数组）2)通过Canvas写操作在页面中渲染像素

3.实验原理

HTML5的canvas提供了getImageData接口来获取canvas中的数据，所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵。注意：虽然IE9开始支持了canvas接口，但是其getImageData获取的数据并不是以标准的TypedArray方式存储的，或者说IE9没有提供对WebGLNativebinarydata的支持，所以如果需要运行实例，浏览器版本需要更高的版本，推荐：Chrome10+,IE10+,Firefox4+,Opera11.64+,Safari5.1+。4.实验步骤

1)建立基本矩阵

在图像处理中，矩阵计算是非常重要的内容，所以我们首先来建立一个矩阵模型。通过getImageData接口获取的ImageData虽然具有类似矩阵的结构，但是他的结构是不可变的，不适合扩展，所以我们选择在Javascript中自建一个矩阵。代码如下：functionMat(__row,__col,__data,__buffer){this.row=__row||0;this.col=__col||0;this.channel=4;this.buffer=__buffer||newArrayBuffer(__row*__col*4);this.data=newUint8ClampedArray(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。2)图片数据转成矩阵

functionimread(__image){

varwidth=__image.width,

height=__image.height;iResize(width,height);iCtx.drawImage(__image,0,0);

varimageData=iCtx.getImageData(0,0,width,height),tempMat=newMat(height,width,imageData.data);imageData=null;

iCtx.clearRect(0,0,width,height);returntempMat;

}

注意：这里的__image指的是Image对象，不是字符串URL。因为浏览器中

Image的读取是一个异步过程，并不能立刻返回相应的Mat对象，所以这个函数应当这样使用：

varimg=newImage();img.onload=function(){

varmyMat=imread(img);

};

img.src=\"1.jpg\";

iCtx和iResize方法是一个全局变量，允许给其它函数公用，其中iCtx表示Canvas的2D画布，iResize用于调整画布的大小，具体代码略；

以上函数中出现的getImageData函数用于从canvas画布读取图像的像素：数据以RGBA色彩格式返回的，即：

1)R：红色像素的数值（大小）2)G：绿色像素的数值（大小）3)B：蓝色像素的数值（大小）

4)A：Alpha通道的数值，代表图像的不透明度（大小）

语法：context.getImageData(x,y,width,height);例子：

red=imgData.data[0];

//获取红色像素大小

green=imgData.data[1];blue=imgData.data[2];alpha=imgData.data[3];

3)矩阵转成图像数据

经过处理（灰度变换等）后的矩阵，需要一个方法变成ImageData，然后我们

才可以通过putImageData方法在canvas上绘制经过处理的图像。代码如下：

functionRGBA2ImageData(__imgMat){varwidth=__imgMat.col,

height=__imgMat.row,

imageData=iCtx.createImageData(width,height);imageData.data.set(__imgMat.data);returnimageData;}

5.实验结果

截图如下：

代码如下：

说明：core.js封装了实验步骤中所述的矩阵处理代码

6.实验心得

与VC++不同的是Web端Canvas读取的图像数据多一个Alpha分量表示图像的不透明度。使用Canvas读取图像数据无需关注图像的压缩格式。