Javascript图像处理:平滑处理

前言

上一篇文章,我们讲解了图像的虚拟边缘,这篇文章开始进行平滑(也就是模糊)处理。

基本原理

这里直接引用OpenCV 2.4+ C++ 平滑处理和OpenCV 2.4+ C++ 边缘梯度计算的相关内容:

平滑也称模糊, 是 一项简单且使用频率很高的图像处理方法。

平滑处理时需要用到一个滤波器。 最常用的滤波器是线性滤波器,线性 滤波处理的输出像素值(例如:g(i,j))是输入像素值(例如:f(i+k,j+l))的加权平均:

g(i,j) = sum_{k,l} f (i+k, j+l) h(k,l)

h(k,l)称为核, 它仅仅是一个加权系数。

这里涉及一种叫做“卷积”的运算,那么卷积 是什么呢?

卷积是在每一个图像块与某个算子(核)之间进行的运算。

核?!

核就是一个固定大小 的数值数组。该数组带有一个锚点 ,一般位于数组中央。

kernel example

可是这怎么运算啊?

假 如你想得到图像的某个特定位置的卷积值,可用下列方法计算:

将核的锚点放在该特定位置的像素上,同时,核内 的其他值与该像素邻域的各像素重合;

将核内各值与相应像素值相乘,并将乘积相加;

将所得结果放到与锚点对应的 像素上;

对图像所有像素重复上述过程。

用公式表示上述过程如下:

H(x,y) = sum_{i=0}^{M_{i} - 1} sum_{j=0}^{M_{j}-1} I(x+i - a_{i}, y + j - a_{j})K(i,j)

在图像边缘的卷积怎么办呢?

计算卷积前, 需要通过复制源图像的边界创建虚拟像素,这样边缘的地方也有足够像素计算卷积了。这就是为什么上一篇文章需要做虚拟 边缘函数。

均值平滑

均值平滑实际上就是内核元素全是1的卷积运算,然后再除以内核的大小,用数学表达 式来表示就是:

texttt{K} = frac{1}{texttt{ksize.width*ksize.height}} begin{bmatrix} 1 & 1 & 1 & cdots & 1 & 1 1 & 1 & 1 & cdots & 1 & 1 hdotsfor{6} 1 & 1 & 1 & cdots & 1 & 1 end{bmatrix}

时间: 2024-09-20 03:08:50

Javascript图像处理:平滑处理的相关文章

Javascript图像处理—平滑处理实现原理_javascript技巧

前言 上一篇文章,我们讲解了图像的虚拟边缘,这篇文章开始进行平滑(也就是模糊)处理. 基本原理 这里直接引用OpenCV 2.4+ C++ 平滑处理和OpenCV 2.4+ C++ 边缘梯度计算的相关内容: 平滑也称模糊, 是一项简单且使用频率很高的图像处理方法. 平滑处理时需要用到一个滤波器 . 最常用的滤波器是线性 滤波器,线性滤波处理的输出像素值(例如:)是输入像素值(例如:)的加权平均: 称为核 , 它仅仅是一个加权系数. 这里涉及一种叫做"卷积"的运算,那么卷积是什么呢? 卷

Javascript图像处理

思路 HTML5的canvas提供了getImageData接口来获取canvas中的数据,所以我们能够先用drawImage接口将图片画在 canvas上然后再通过getImageData得到图片数据矩阵. canvas的浏览器支持情况,请参见: http://html5test.com/compare/feature/canvas-context.html 需要注意,虽然IE9开始支持了canvas接口,但是 其getImageData获取的数据并不是以标准的TypedArray方式存储的,

Javascript图像处理:亮度对比度

前言 上一篇文章,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化. 其实,亮度是啥玩意? 亮度就是比较亮眼咯-- 实际上对于RGBA颜色空间,变亮其实就等于R.G.B三个通道同时加大,那么变暗就等于同时减小咯. 这比较好理解,因为最暗的黑色是RGB(0,0,0),而最亮的白色是RGB(255,255,255).所以变亮应该RGB各通道都要增大. 那么,对比度呢? 对比度,其实就是颜色差啦. 那么对于RGBA颜色空间,对比度变大其实就等于R.G.B三个通

Javascript图像处理—亮度对比度应用案例_基础知识

前言 上一篇文章,我们讲解了图像处理中的卷积操作和平滑(也就是模糊)处理,这篇文章我们进行亮度和对比度的变化. 其实,亮度是啥玩意? 亮度就是比较亮眼咯-- 实际上对于RGBA颜色空间,变亮其实就等于R.G.B三个通道同时加大,那么变暗就等于同时减小咯. 这比较好理解,因为最暗的黑色是RGB(0,0,0),而最亮的白色是RGB(255,255,255).所以变亮应该RGB各通道都要增大. 那么,对比度呢? 对比度,其实就是颜色差啦. 那么对于RGBA颜色空间,对比度变大其实就等于R.G.B三个通

Javascript图像处理:矩阵基本方法

前言 上一篇文章,我们定义了矩阵,这篇文章我们来给矩阵添加一些常用方法. toString方法 toString方法通常用作将对象转成字符串描述,所以我们将这一方法定义为输出矩阵元素. Mat.prototype.toString = function(){ var tempData = this.data, text = "Mat("+ this.type +") = {\n", num = this.col * this.channel; for(var i =

Javascript图像处理:边缘梯度计算

前言 上一篇文章,我们讲解了图像处理中的膨胀和腐蚀函数,这篇文章将做边缘梯度计算函数.直接摘自OpenCV 2.4+ C++ 边缘梯度计算. 图像的边缘 图像的边缘从数学上是如何表示的呢? 图像的边缘上,邻近的像素值应当显著地改变了.而在数学上,导数是表示改变快慢的一种方法.梯度值的大变预示着图像中内容的显著变化了. 用更加形象的图像来解释,假设我们有一张一维图形.下图中灰度值的"跃升"表示边缘的存在: 使用一阶微分求导我们可以更加清晰的看到边缘"跃升"的存在(这里

Javascript图像处理:图像形态学

前言 上一篇文章,我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数. 膨胀与腐蚀 说概念可能很难解释,我们来看图,首先是原图: 膨胀以后会变成这样: 腐蚀以后则会变成这样: 看起来可能有些莫名其妙,明明是膨胀,为什么字反而变细了,而明明是腐蚀,为什么字反而变粗了. 实际上,所谓膨胀应该指: 较亮色块膨胀. 而所谓腐蚀应该指: 较亮色块腐蚀.

Javascript图像处理:阈值

前言 上一篇文章,我们讲解了图像处理中的亮度和对比度的变化,这篇文章我们来做一个阈值函数. 最简单的图像分割方法 阈值是最简单的图像分割方法. 比如为了从下图中分割出苹果,我们利用前景与背景的灰度差值,通过设定一个阈值,对于该像素大于这个阈值时就以黑色表示,小于便以灰色表示. 五种阈值类型 和OpenCV一样,我们将提供五种阈值类型,方便使用. 下面是原图像的波形表示,纵坐标表示像素点的灰度值大小,蓝线是阈值大小. 二进制阈值化 公式表示是: texttt{dst} (x,y) = fork{t

Javascript图像处理—图像形态学(膨胀与腐蚀)_javascript技巧

前言 上一篇文章,我们讲解了图像处理中的阈值函数,这一篇文章我们来做膨胀和腐蚀函数. 膨胀与腐蚀 说概念可能很难解释,我们来看图,首先是原图: 膨胀以后会变成这样: 腐蚀以后则会变成这样: 看起来可能有些莫名其妙,明明是膨胀,为什么字反而变细了,而明明是腐蚀,为什么字反而变粗了. 实际上,所谓膨胀应该指: 较亮色块膨胀. 而所谓腐蚀应该指: 较亮色块腐蚀. 上面图里面,由于背景白色是较亮色块,所以膨胀时就把黑色较暗色块的字压扁了--相反腐蚀时,字就吸水膨胀了-- 用数学公式表示就是: 说白了就是