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

实验题目：图像文件读取(js实现）

1.实验目的

使用javascript读取图像文件并显示出来（结合canvas）

2.实验内容

1)加载图像文件，通过Canvas读取图像的像素值并存入矩阵（或数组）

2)通过Canvas写操作在页面中渲染像素

3.实验原理

HTML5的canvas提供了getImageData接口来获取canvas中的数据，所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵。

注意：虽然IE9开始支持了canvas接口，但是其getImageData获取的数据并不是以标准的TypedArray方式存储的，或者说IE9没有提供对WebGL Native binary data的支持，所以如果需要运行实例，浏览器版本需要更高的版本，推荐：Chrome10+,IE10+,Firefox

4+,Opera11.64+,Safari5.1+。

4.实验步骤

1)建立基本矩阵

在图像处理中，矩阵计算是非常重要的内容，所以我们首先来建立一个矩阵模型。

通过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。

2)图片数据转成矩阵

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;

}

注意：这里的__image指的是Image对象，不是字符串URL。因为浏览器中Image的读取是一个异步过程，并不能立刻返回相应的Mat对象，所以这个函数应当这样使用：

var img=new Image();

img.onload=function(){

var myMat=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上绘制经过处理的图像。代码如下：

function RGBA2ImageData(__imgMat){

var width=__imgMat.col,

height=__imgMat.row,

imageData=iCtx.createImageData(width,height);

imageData.data.set(__imgMat.data);

return imageData;

}

5.实验结果

截图如下：