数字图像处理基础

作者: Cesium4Unreal | 来源:发表于2017-07-15 20:59 被阅读295次

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

邻域处理包括:

  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

相关文章

  • 数字图像处理(一) 绪论

      本文主要通俗介绍了数字图像基础概念、图像处理技术划分、技术起源及应用场景、成像技术等 引言 什么是数字图像呢?...

  • 数字图像处理(二) 数字图像处理基础

      本节主要目的是介绍本书所用到的数字图像处理的一些基本概念。来源于东北大学 魏颖教授的数字图像课程笔记。 图像的...

  • 数字图像处理基础

    1. 什么是数字图像处理 计算机视觉的最终目的:使用计算机来模拟人类视觉,包括学习和推理,并根据视觉输入采取相应的...

  • 数字图像处理基础

    书籍:数字图像处理(冈萨雷斯) 一、图像的概念 一幅图像可以被定义为一个二维函数 f (x,y),其中 x,y 是...

  • 数字图像处理基础

    以下为学习图像的入门知识,如果如果想学好图像,必须对以下知识有足够的了解。本文没有具体的写出各知识点,大家在看的时...

  • SLAM入门资料整理

    计算机视觉、图像基础 数字图像处理 计算机视觉 Multiple View Geometry in Compute...

  • 《数字图像处理与分析》学习笔记 1

    第一章:图像处理的基本知识 1.1数字图像处理概述 【1、数字图像处理及其特点】 1.图像与数字图像 图像是自然界...

  • 图像处理常用术语

    基本术语 digital image:数字图像digital image processing:数字图像处理ima...

  • 数字图像处理实验一

    MATLAB入门及数字图像处理编程基础 【实验目的】: 1. 熟悉和掌握MATLAB基本编程环境 2. 熟悉和掌握...

  • 四、数字图像处理数学基础

    线性系统理论 常用矩阵运算 线性系统理论 1.线性系统 系统输入x(t)及响应y(t)满足: 齐次性:ax -> ...

网友评论

    本文标题:数字图像处理基础

    本文链接:https://www.haomeiwen.com/subject/nnezhxtx.html