我对图像处理一直很感兴趣,曾经写过好几篇博客(1,2,3,4)。
前几天读到一篇文章,它提到图像其实是一种波,可以用波的算法处理图像。我顿时有一种醍醐灌顶的感觉,从没想到这两个领域是相关的,图像还可以这样玩!下面我就来详细介绍这篇文章。
一、为什么图像是波?
我们知道,图像由像素组成。下图是一张 400 x 400 的图片,一共包含了 16 万个像素点。
每个像素的颜色,可以用红、绿、蓝、透明度四个值描述,大小范围都是0 ~ 255
,比如黑色是[0, 0, 0, 255]
,白色是[255, 255, 255, 255]
。通过 Canvas API 就可以拿到这些值。
如果把每一行所有像素(上例是400个)的红、绿、蓝的值,依次画成三条曲线,就得到了下面的图形。
可以看到,每条曲线都在不停的上下波动。有些区域的波动比较小,有些区域突然出现了大幅波动(比如 54 和 324 这两点)。
对比一下图像就能发现,曲线波动较大的地方,也是图像出现突变的地方。
这说明波动与图像是紧密关联的。图像本质上就是各种色彩波的叠加。
二、频率
综上所述,图像就是色彩的波动:波动大,就是色彩急剧变化;波动小,就是色彩平滑过渡。因此,波的各种指标可以用来描述图像。
频率(frequency)是波动快慢的指标,单位时间内波动次数越多,频率越高,反之越低。
上图是函数sin(Θ)
的图形,在2π
的周期内完成了一次波动,频率就是1。
上图是函数sin(2Θ)
的图形,在2π
的周期内完成了两次波动,频率就是2。
所以,色彩剧烈变化的地方,就是图像的高频区域;色彩稳定平滑的地方,就是低频区域。
三、滤波器
物理学对波的研究已经非常深入,提出了很多处理波的方法,其中就有滤波器(filter):过滤掉某些波,保留另一些波。
下面是两种常见的滤波器 。
下面是低通滤波的例子。
上图中,蓝线是原始的波形,绿线是低通滤波lowpass
后的波形。可以看到,绿线的波动比蓝线小很多,非常平滑。
下面是高通滤波的例子。
上图中,黄线是原始的波形,蓝线是高通滤波highpass
后的波形。可以看到,黄线的三个波峰和两个波谷(低频波动),在蓝线上都消失了,而黄线上那些密集的小幅波动(高频波动),则是全部被蓝线保留。
再看一个例子。
上图有三根曲线,黄线是高频波动,红线是低频波动。它们可以合成为一根曲线,就是绿线。
上图中,绿线进行低通滤波和高通滤波后,得到两根黑色的曲线,它们的波形跟原始的黄线和红线是完全一致的。
四、图像的滤波
浏览器实际上包含了滤波器的实现,因为 Web Audio API 里面定义了声波的滤波。这意味着可以通过浏览器,将lowpass
和highpass
运用于图像。
lowpass
使得图像的高频区域变成低频,即色彩变化剧烈的区域变得平滑,也就是出现模糊效果。
上图中,红线是原始的色彩曲线,蓝线是低通滤波后的曲线。
highpass
正好相反,过滤了低频,只保留那些变化最快速最剧烈的区域,也就是图像里面的物体边缘,所以常用于边缘识别。
上图中,红线是原始的色彩曲线,蓝线是高通滤波后的曲线。
下面这个网址,可以将滤波器拖到图像上,产生过滤后的效果。
浏览器实现滤波的范例代码,可以看这个仓库。
(完)
东方九木 说:
Linda的原始全图有吗
2017年12月13日 09:38 | # | 引用
ixx 说:
三、滤波器 第二个例子中
黄线的原始的波形,高通滤波后变成蓝线的波形,损失了很多信息
这种情况就不能再通过蓝线低通滤波还原回黄线了吧?
2017年12月13日 10:12 | # | 引用
宇宙全栈 说:
我有。邮件我我发给你~
2017年12月13日 10:37 | # | 引用
朋也 说:
希望能介绍深一些
2017年12月13日 10:38 | # | 引用
c 说:
她不是linda,是lena……
https://en.wikipedia.org/wiki/Lenna
2017年12月13日 12:22 | # | 引用
吴小伟 说:
我记得里图像处理中有一种叫小波算法,好像是和JPEG有关的,一直不懂原理。
今天看到这个文章,一下醍醐灌顶。
2017年12月13日 14:18 | # | 引用
airomyas 说:
其实这就是AAC编码,JPEG编码这些音频压缩、图片压缩算法的根本原理。
这些算法里面都涉及类似离散余弦变换这种处理,就是把待处理数据从时域变换到频域,都是高频的部分代表变化剧烈的部分,低频部分就是代表变化不剧烈的地方。
换到频域以后,低频的部分使用很少的空间就能保存,高频的部分再做一点有损的压缩,整体的大小就大大降低了,这个就是编码的过程。通过控制有损压缩的程度,就可以控制编码后的质量。
解码的过程就是把频域再还原回时域。
2017年12月13日 14:41 | # | 引用
Zhang 说:
将图像看成波,应该是比较好理解的。
2017年12月13日 15:06 | # | 引用
卫书有道 说:
400x400一共16w个像素点, 为什么图画的是400个呢?
2017年12月13日 20:12 | # | 引用
antior 说:
非常棒!
2017年12月13日 21:48 | # | 引用
dove 说:
请持续!
2017年12月14日 09:58 | # | 引用
kuka 说:
原文说是第一行的
2017年12月14日 10:10 | # | 引用
wubing 说:
medium好像被墙了,请问你是用什么访问的?可否说一下?
2017年12月14日 11:30 | # | 引用
lwl 说:
2017年12月15日 03:24 | # | 引用
yun 说:
可以用lantern
2017年12月15日 15:49 | # | 引用
Simon Ma 说:
获益良多
2017年12月15日 15:57 | # | 引用
zheng 说:
确实醍醐灌顶,以前一直没想通图片怎么能像声音一样DSP,也没花功夫去弄明白。现在这个应用也很好理解了:
https://www.zhihu.com/question/50735753
2017年12月18日 10:01 | # | 引用
溏酒深 说:
为什么搞图像的人,总喜欢用那张美女的照片,难道离了她就搞不成图像处理了吗?
阮大大,你知道不呀?你晓得这个美女到底是哪个不呀?跟图像处理领域有什么联系不?
2017年12月19日 14:12 | # | 引用
决断无证骑士 说:
David C. Munson. 在“A Note on Lena” 中给出了两条理由:首先,Lenna图像包含了各种细节、平滑区域、阴影和纹理,这些对测试各种图像处理算法很有用。它是一副很好的测试图像!第二,Lena图像里是一个很迷人的女子。所以不必奇怪图像处理领域里的人(大部分为男性)被一副迷人的图像吸引。
2017年12月19日 16:36 | # | 引用
Mouse 说:
横轴纵轴分别代表啥?
2017年12月20日 02:41 | # | 引用
Gavin 说:
研究机器学习把数学全都捡起来了
2017年12月20日 09:27 | # | 引用
就不告诉你名字 说:
如果图像波的某个地方已经变得平滑了 根据一些处理能回去的话 那么就可以消除马赛克了 是这样吗?...
2017年12月21日 16:39 | # | 引用
Jerry 说:
讲的真好,听明白了。
2017年12月21日 17:05 | # | 引用
1em0n 说:
最早的数字图像处理的论文(6,70年代)就是用的这个照片,被沿用下来了而已。
2017年12月21日 17:19 | # | 引用
MR SMITH 说:
http://www.lenna.org/full/l_hires.jpg
2017年12月21日 18:07 | # | 引用
M16 说:
还可以说得更本源一些,图像的形成是借助于光,光本身就是一种可见的电磁波,每种颜色都有不同的波长,用滤波来处理在合适不过
2017年12月22日 11:32 | # | 引用
freedom 说:
非常感谢阮大大的文章,我有几个问题想请教您。
请问滤波器处理得到模糊效果和边缘识别之后的应用场景是什么呢?
难道只是为了得到视觉的艺术处理么?这个意义或者说用处个人觉得不大。
另外除了滤波器处理,还有别的处理方法以得到别的效果么?
请大大给一些指点,
谢谢。
2017年12月25日 00:27 | # | 引用
白候平 说:
软老师,你好。每次看到你的博客,都感觉特别好,不是说写的有多好多专业,而是您往往能用一些简单的例子,让我理解一个概念。非常受用,感谢您的博客带我走进了计算机的世界,最近在学习一些计算机图形学方面的知识,发现我的数学知识非常不足。我该怎么办!跪求老师推荐的学习材料指点迷津!
2017年12月25日 14:28 | # | 引用
ck 说:
说个简单的 边缘识别后可以抽取出图片中的重点部分。比如说对于文字识别任务,各种颜色,旁边的色块都是多余的信息。
2017年12月25日 16:09 | # | 引用
徐燚敏 说:
您的服务器是阿里的吗?
还是自己搭建的服务器做的路由
2017年12月25日 16:42 | # | 引用
Bob 说:
好幽默...
https://en.wikipedia.org/wiki/Lenna
2017年12月26日 08:47 | # | 引用
puyangsky 说:
@freedom:
请搜一下卷积神经网络(CNN),其中卷积就是一种滤波,同时图像识别也是通过对图像的边缘的识别来实现。
2017年12月27日 16:32 | # | 引用
Krist Pan 说:
是Lenna,不是Linda
2017年12月29日 17:24 | # | 引用
spaceman007 说:
感謝阮大大,濾波真是神奇,沒想到圖像可以用音頻的處理方式,開眼了。我特意爲這篇文章製作了demo: http://spaceman007.gitee.io/lenna/,希望有幫助。
2018年1月19日 18:18 | # | 引用
灿子 说:
阮大大这些曲线图是用什么画的呀?
2018年1月23日 09:41 | # | 引用
杜少 说:
是卷帙吧
2018年4月13日 11:55 | # | 引用
龙哥哥 说:
此波非彼波,之前将二者混淆,还真被弄晕了。。。。
2018年6月 2日 21:33 | # | 引用
兔斯基 说:
因为信息都保存在高频信号里
2018年11月13日 09:09 | # | 引用
LightingX 说:
那么图像的频率怎么计算呢?即使是二维傅里叶变换,也需要圈定一个区间,这个区间也像音频里面的一样取吗?
2019年12月 2日 14:37 | # | 引用
胡托任 说:
这个系列的文章写得真好,把专业的问题通俗的讲出来了。关于这个命题,老师提到了一行的波形问题,但是有两个地方好像没说明白,不知道我理解对不对。一是频率还不等于波形,频率的函数图应该是波形图求导数吧,表示波形的变化率。二是没有扩展到二维空间,如果扩展到二维空间,是不是就是二维波形求导表示二维的频率。后面的低通和高通滤波都是在频率基础上的过滤,而不是在波形上的过滤。请老师帮忙指点。
2020年5月20日 13:23 | # | 引用
赖拉拉 说:
那个坐标系应该是每一列,而非每一行吧,。。。。。
2021年1月 8日 23:10 | # | 引用
话梅 说:
根据不可考究的传言是,这幅图片包含了足够的细节(帽子和羽毛)以及大片的平滑区域(皮肤),用作图片处理非常合适。加上最开始,研究人员用这张图片发表了论文,后续大家进行算法优劣的评定的时候,以这个图片作为标准。以上内容,权做趣闻。
2021年9月23日 13:08 | # | 引用
确实 说:
开始看前面的部分觉得啥用没有,看到后面豁然开朗- -
2021年9月24日 16:52 | # | 引用
TrajanD 说:
文中叙述的波是将图像按行展开后取各像素点的颜色值作图而得到的,和物理上的电磁波概念应无直接关系
2023年4月23日 22:18 | # | 引用