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

实验题目：图像文件读取(js实现）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.实验结果截图如下：代码如下：imgid=imgtitle=图像style=display:none;/canvasid=demotitle=画板style=margin-left:20px/canvasscriptsrc=src/core.jstype=text/javascript/scriptscriptvarimg=document.getElementById(img);img.onload=function(){varmat=cv.imread(img);//读取图像数据，返回矩阵show(mat);//绘图};img.src=img/dog.jpg;varcanvas=document.getElementById(demo),demo=canvas.getContext(2d);functionshow(__mat){canvas.width=__mat.col;canvas.height=__mat.row;demo.putImageData(cv.RGBA2ImageData(__mat),0,0);}/script说明：core.js封装了实验步骤中所述的矩阵处理代码6.实验心得与VC++不同的是Web端Canvas读取的图像数据多一个Alpha分量表示图像的不透明度。使用Canvas读取图像数据无需关注图像的压缩格式。