1. 什么是数字图像处理
计算机视觉的最终目的:使用计算机来模拟人类视觉,包括学习和推理,并根据视觉输入采取相应的行动。
三种类型的计算机处理:低级、中级、高级;
低级:原始操作(降噪、对比度增强、图像锐化);特点:输入输出均为图像。
中级:图像分割、分类、识别;特点:输入为图像,输出为提取的属性(边缘、轮廓以及单个对象的特性)
高级:通过执行通常与人类视觉相关的感知函数,来对识别的对象进行总体确认。
2. 基本原理
2.1 数字图像的表示
图像关于x和y坐标以及振幅连续,要将这样的一幅图像转换成数字形式,就要求数字化坐标和振幅。将坐标值数字化称为取样;将振幅数字化为量化。因此,当f的x,y分量和振幅都是有限且离散的量时,称该图像为数字图像。

2.2 图像的矩阵表示

2.3 图像的读取和呈现
本文使用HTML5和JavaScript读取图片和呈现。
由于HTML5引入Canvas标签,通过Canvas,JavaScript可以实现对图像的像素级操作,甚至可以直接处理二进制原始数据。这为图像的签名技术提供了支持。另外canvas还提供了常用的图像格式转换功能,可以使用JavaScript简单快捷地更改图像的编码方式。
出于安全考虑,浏览器通常不允许处理跨域图像,但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全警告的方法是使用CORS(Cross-Origin Resource Sharing),具体可以参加http://www.w3.org/TR/cors/。
使用FileReader和Canvas读取本地文件
<pre>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function init() {
var myCanvas = document.getElementById('myCanvas');
var myFile = document.getElementById('myFile');
myFile.onchange = function(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
reader.onload = putImage2Canvas;
reader.readAsDataURL(selectedFile);
}
}
function putImage2Canvas(event) {
var img = new Image();
img.src = event.target.result;
img.onload = function(){
myCanvas.width = img.width;
myCanvas.height = img.height;
var context = myCanvas.getContext('2d');
context.drawImage(img, 0, 0);
var imgdata = context.getImageData(0, 0, img.width, img.height);
context.drawImage(img, x, y);
}
}
</script>
</head>
<body onload="init();">
<input type="file" id="myFile" />
</br>
<canvas id="myCanvas"></canvas>
</body>
</html>
</pre>

使用Image标签读取图片
<pre>
var leftCanvas = document.getElementById("leftCanvas");
var rightCanvas = document.getElementById("rightCanvas");
var leftCtx = leftCanvas.getContext("2d");
var rightCtx = rightCanvas.getContext("2d");
var image = new Image();
image.src = "monalisa.jpg";
image.onload = function(){
leftCanvas.width = image.width;
leftCanvas.height = image.height;
leftCtx.drawImage(image, 0, 0);
rightCanvas.width = image.width;
rightCanvas.height = image.height;
rightCanvas.style.left = image.width + 20 + 'px';
rightCtx.drawImage(image, 0, 0);
};
</pre>
2.4 图像的类型
● 亮度图像 (Intensity images) [0,255]
● 二值图像 (Binary images)
● 索引图像 (Indexed images)
● RGB图像 (RGB images)
3.亮度变换和空间滤波
空间域:指的是图像平面本身。在空间域内处理图像的方法是直接对图像的像素进行处理。
两种重要的空间域处理方法:亮度变换和空间滤波(邻域处理或空间卷积);
3.1 背景知识
空间域处理表达式:g(x,y) = T[f(x,y)]; f(x,y)为源图像,g(x,y)为处理后的图像,T是对图像f进行处理的操作符,定义在点(x,y)的指定邻域内。此外,T还可以对一组图像进行处理,例如为降低噪声而让K幅图像相加。
图像的邻域

3.2亮度变换
变换T的最简单形式是邻域大小为1*1(即单个像素)时。此时,(x,y)出的g值仅由f在改点出的亮度决定,T也变为一个亮度或灰度级变换函数。

RGB灰度变换是一种“空间域”的操作,即直接对图像进行具体的操作。灰度变换的作用就是让图片看起来更加清晰,为二值化和边缘检测等操作打下基础。 RGB图像经过灰度化以后得到M×N灰度图像。可以将其看成一个定义域离散的二元函数f(i,j),其中i,j分别是M、N之间的正整数;f(i,j)表示灰度值,图像类型不同值域不同。大家可以想象有很多长短不同的牙签紧密插在泡沫塑料板的样子,大概图像如下图。

如果用数学式子表示,即为:g(i,j) = T[f(i,j)];其中g(i,j)是处理后的图像;f(i,j)是处理前的图像;T[ ]是处理手段,这些手段是各种各样的,可以根据需要进行调整。例如,如果您觉得某个区域内的“牙签”太长,可以对其进行“修剪”,于是这个区域的灰度值减少了。或者您觉得某个区域“牙签”长短的差距不明显,其实可通过让长的“牙签”变更长,短的“牙签”变更短的思路实现差距明显化。
如前文提及,灰度变换的本质就是对图像的灰度值进行修改。虽然我们可以逐个逐个像素点进行修改,但是工作量很庞大。以下将介绍一种典型的思路。我们知道T[ ]是变换的手段,如果我们想让图片中亮的更亮,暗的更暗,可以将原图像通过一个映射关系得到处理后的图像。这个映射关系就是T[ ]。matlab当中常用的灰度变换函数是imadjust(I,[low_in; high_in],[low_out; high_out],gamma)。这个函数的具体参数就不作具体说明了。它的映射关系如下图所示:

gamma的取值不同,曲线的陡峭程度也不同。

3.3 灰度直方图
灰度直方图是统计图片灰度分布的图像,其横坐标是灰度值,纵坐标是该灰度值的数量。imhist()函数能绘制灰度直方图。

3.4 图像增强ImageAdjust实验
low_in = low_in || 0, high_in = high_in || 1, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 1;

low_in = low_in || 0, high_in = high_in || 1, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 0.05;

low_in = low_in || 0, high_in = high_in || 1, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 1.5;

low_in = low_in || 0.5, high_in = high_in || 0.75, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 2;

图像对比度拉伸变换



3.5 直方图处理和函数绘图
一幅数字图像在范围[0,G]内共有L个灰度级,其直方图可以为离散的函数:

3.6 空间滤波
邻域处理包括:
- 定义中心点(x,y)
- 仅对预先定义的以(x,y)为中心点的邻域内的像素进行运算
- 令运算结果为该点处处理的响应
- 对图像中的每一点重复此步骤
若对邻域中像素的计算为线性运算,则称为线性空间滤波(也成为空间卷积),否则我们称此运算为非线性空间滤波。
3.6.1 线性空间滤波

已知

已知

下面通过演示求
第一步,x[n] * y[0]并平移到位置0:

第二步,x[n] * y[1]并平移到位置1:

第三步,x[n] * y[2]并平移到位置2:

最后,把上面三个图叠加,就得到了x[n]y[n]:

====================================================
从这里,可以看到卷积的重要的物理意义是:一个函数(如:单位响应)在另一个函数(如:输入信号)上的加权叠加。
通俗的说:
在输入信号的每个位置,叠加一个单位响应,就得到了输出信号。
使用卷积运算,使用不同的卷积核,可以得到不同的效果;
Roberts算子

Sobel Y算子

Canny算子

3.6.2 非线性空间滤波
非线性空间滤波也是基于邻域操作的,
5.图像复原
6.彩色图像处理
7.小波变换
8.图像压缩
9.形态学图像处理
10.图像分割
11.表示和描述
12.对象识别
参考文献
1.使用JavaScript进行基本图形操作与处理
2.如果看了这篇文章你还不懂傅里叶变换,那就过来掐死我吧
3.LENA.JS DEMO
4.对各种 JS 图片处理库进行分析
5.matlab灰度变换相关的学习笔记
6.imadjust3
网友评论