1. 什么是数字图像处理
计算机视觉的最终目的：使用计算机来模拟人类视觉，包括学习和推理，并根据视觉输入采取相应的行动。
三种类型的计算机处理：低级、中级、高级；
低级：原始操作(降噪、对比度增强、图像锐化)；特点：输入输出均为图像。
中级：图像分割、分类、识别；特点：输入为图像，输出为提取的属性(边缘、轮廓以及单个对象的特性）
高级：通过执行通常与人类视觉相关的感知函数，来对识别的对象进行总体确认。
2. 基本原理
2.1 数字图像的表示
图像关于x和y坐标以及振幅连续，要将这样的一幅图像转换成数字形式，就要求数字化坐标和振幅。将坐标值数字化称为取样；将振幅数字化为量化。因此，当f的x,y分量和振幅都是有限且离散的量时，称该图像为数字图像。
image.png
2.2 图像的矩阵表示
image.png
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.png
使用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幅图像相加。
图像的邻域
image.png
3.2亮度变换
变换T的最简单形式是邻域大小为1*1(即单个像素)时。此时，(x,y)出的g值仅由f在改点出的亮度决定，T也变为一个亮度或灰度级变换函数。
image.png
RGB灰度变换是一种“空间域”的操作，即直接对图像进行具体的操作。灰度变换的作用就是让图片看起来更加清晰，为二值化和边缘检测等操作打下基础。 RGB图像经过灰度化以后得到M×N灰度图像。可以将其看成一个定义域离散的二元函数f(i,j)，其中i,j分别是M、N之间的正整数；f(i,j)表示灰度值，图像类型不同值域不同。大家可以想象有很多长短不同的牙签紧密插在泡沫塑料板的样子，大概图像如下图。
image.png
如果用数学式子表示，即为：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)。这个函数的具体参数就不作具体说明了。它的映射关系如下图所示:
image.png
gamma的取值不同，曲线的陡峭程度也不同。
image.png
3.3 灰度直方图
灰度直方图是统计图片灰度分布的图像，其横坐标是灰度值，纵坐标是该灰度值的数量。imhist()函数能绘制灰度直方图。
image.png
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;
image.png
low_in = low_in || 0, high_in = high_in || 1, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 0.05;
image.png
low_in = low_in || 0, high_in = high_in || 1, low_out = low_in || 1, high_out = high_out || 0, gamma = gamma || 1.5;
image.png
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;
image.png
图像对比度拉伸变换
image.png
image.png
image.png
3.5 直方图处理和函数绘图
一幅数字图像在范围[0,G]内共有L个灰度级，其直方图可以为离散的函数：
image.png
3.6 空间滤波
邻域处理包括：
- 定义中心点(x,y)
- 仅对预先定义的以(x,y)为中心点的邻域内的像素进行运算
- 令运算结果为该点处处理的响应
- 对图像中的每一点重复此步骤
若对邻域中像素的计算为线性运算，则称为线性空间滤波(也成为空间卷积)，否则我们称此运算为非线性空间滤波。
3.6.1 线性空间滤波
image.png
已知
x[0] = a, x[1] = b, x[2]=c
已知
y[0] = i, y[1] = j, y[2]=k
下面通过演示求
x[n] * y[n]
的过程，揭示卷积的物理意义。第一步，x[n] * y[0]并平移到位置0：
第二步，x[n] * y[1]并平移到位置1：
第三步，x[n] * y[2]并平移到位置2：
最后，把上面三个图叠加，就得到了x[n]y[n]：
简单吧？无非是平移（没有反褶！）、叠加。*====================================================
从这里，可以看到卷积的重要的物理意义是：一个函数（如：单位响应）在另一个函数（如：输入信号）上的加权叠加。
通俗的说：
在输入信号的每个位置，叠加一个单位响应，就得到了输出信号。
使用卷积运算，使用不同的卷积核，可以得到不同的效果；
Roberts算子
image.png
Sobel Y算子
image.png
Canny算子
image.png
3.6.2 非线性空间滤波
非线性空间滤波也是基于邻域操作的，
5.图像复原
6.彩色图像处理
7.小波变换
8.图像压缩
9.形态学图像处理
10.图像分割
11.表示和描述
12.对象识别
参考文献
1.使用JavaScript进行基本图形操作与处理
2.如果看了这篇文章你还不懂傅里叶变换，那就过来掐死我吧
3.LENA.JS DEMO
4.对各种 JS 图片处理库进行分析
5.matlab灰度变换相关的学习笔记
6.imadjust3
网友评论