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

实验题目：图像文件读取(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的支持，所以如果需要运行实例，浏览器版本需要更高的版本，推荐：Chrome 10+ , IE 10+ , Firefox
4+ ,Opera 11.64+ , Safari 5.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);
varimageData = 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对象，所以这个函数应当这样使用：
varimg = new Image();
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上绘制经过处理的图像。

代码如下：
function RGBA2ImageData(__imgMat){
var width = __imgMat.col,
height = __imgMat.row,
imageData = iCtx.createImageData(width, height);
imageData.data.set(__imgMat.data);
return imageData;
}
5.实验结果
截图如下：
代码如下：
<img id = "img" title = "图像" style="display: none;"/>
<canvas id="demo" title = "画板" style="margin-left: 20px"></canvas> <script src="src/core.js" type="text/javascript"></script>
<script>
var img= document.getElementById("img");
img.onload = function(){
var mat = cv.imread(img);//读取图像数据，返回矩阵
show(mat);//绘图
};
img.src = "img/dog.jpg";
var canvas = document.getElementById("demo"),
demo = canvas.getContext("2d");
function show(__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读取图像数据无需关注图像的压缩格式。