数字图像处理基础

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读取本地文件

image.png

使用Image标签读取图片

 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);
};

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 空间滤波

邻域处理包括：

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

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