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

实验题目：图像文件读取(js 实现）实验目的使用javascript读取图像文件并显示出来（结合canvas）实验内容加载图像文件，通过Canvas读取图像的像素值并存入矩阵（或数组）通过Canvas写操作在页面中渲染像素实验原理HTML5的canvas提供了getImageData接口来获取canvas中的数据，所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵。注意：虽然IE9开始支持了canvas接口，但是其getImageData获取的数据并不是以标准的TypedArray方式存储的，或者说IE9没有提供对WebGL Native binary data的支持，所以如果需要运行实例，浏览器版本需要更高的版本，推荐：Chrome 10+ , IE 10+ , Firefox 4+ ,Opera 11.64+ , Safari 5.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。图片数据转成矩阵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色彩格式返回的，即：R：红色像素的数值（大小）G：绿色像素的数值（大小）B：蓝色像素的数值（大小）A：Alpha通道的数值，代表图像的不透明度（大小）语法：context.getImageData(x,y,width,height);例子：red = imgData.data[0];//获取红色像素大小green = imgData.data[1];blue = imgData.data[2];alpha = imgData.data[3];矩阵转成图像数据经过处理（灰度变换等）后的矩阵，需要一个方法变成ImageData，然后我们才可以通过putImageData方法在canvas上绘制经过