javascript图像处理—边缘梯度计算函数

前言

上一篇文章,我们讲解了图像处理中的膨胀和腐蚀函数,这篇文章将做边缘梯度计算函数。

图像的边缘

图像的边缘从数学上是如何表示的呢?

图像的边缘上,邻近的像素值应当显著地改变了。而在数学上,导数是表示改变快慢的一种方法。梯度值的大变预示着图像中内容的显著变化了。

用更加形象的图像来解释,假设我们有一张一维图形。下图中灰度值的“跃升”表示边缘的存在:

    

使用一阶微分求导我们可以更加清晰的看到边缘“跃升”的存在(这里显示为高峰值):

    

由此我们可以得出:边缘可以通过定位梯度值大于邻域的相素的方法找到。

近似梯度

比如内核为3时。

首先对x方向计算近似导数:

然后对y方向计算近似导数:

然后计算梯度:

当然你也可以写成:

函数实现


复制代码 代码如下:

var Sobel = function(__src, __xorder, __yorder, __size, __borderType, __dst){
(__src && (__xorder ^ __yorder)) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
if(__src.type && __src.type === "CV_GRAY"){
var kernel1,
kernel2,
height = __src.row,
width = __src.col,
dst = __dst || new Mat(height, width, CV_16I, 1),
dstData = dst.data
size = __size || 3;
switch(size){
case 1:
size = 3;
case 3:
if(__xorder){
kernel = [-1, 0, 1,
-2, 0, 2,
-1, 0, 1
];
}else if(__yorder){
kernel = [-1, -2, -1,
, 0, 0,
, 2, 1
];
}
break;
case 5:
if(__xorder){
kernel = [-1, -2, 0, 2, 1,
-4, -8, 0, 8, 4,
-6,-12, 0,12, 6,
-4, -8, 0, 8, 4,
-1, -2, 0, 2, 1
];
}else if(__yorder){
kernel = [-1, -4, -6, -4, -1,
-2, -8,-12, -8, -2,
, 0, 0, 0, 0,
, 8, 12, 8, 2,
, 4, 6, 4, 1
];
}
break;
default:
error(arguments.callee, UNSPPORT_SIZE/* {line} */);

}

GRAY216IC1Filter(__src, size, height, width, kernel, dstData, __borderType);

}else{
error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);
}
return dst;
};

这里只提供了内核大小为3和5的Sobel算子,主要原因是7或以上的内核计算就比较慢了。
输出一个单通道的16位有符号整数矩阵。


复制代码 代码如下:

function GRAY216IC1Filter(__src, size, height, width, kernel, dstData, __borderType){
var start = size >> 1;

var withBorderMat = copyMakeBorder(__src, start, start, 0, 0, __borderType);

var mData = withBorderMat.data,
mWidth = withBorderMat.col;

var i, j, y, x, c;
var newValue, nowX, offsetY, offsetI;

for(i = height; i--;){
offsetI = i * width;
for(j = width; j--;){
newValue = 0;
for(y = size; y--;){
offsetY = (y + i) * mWidth;
for(x = size; x--;){
nowX = x + j;
newValue += (mData[offsetY + nowX] * kernel[y * size + x]);
}
}
dstData[j + offsetI] = newValue;
}
}
}

然后把内核和矩阵交给这个滤波器处理,就OK了。

把这个滤波器独立出来的原因是,可以给其他类似的计算边缘函数使用,比如Laplacian和Scharr算子。

转为无符号8位整数

由于Sobel算子算出来的是16位有符号整数,无法显示成图片,所以我们需要一个函数来将其转为无符号8位整数矩阵。

convertScaleAbs函数是将每个元素取绝对值,然后放到Int8Array数组里面,由于在赋值时候大于255的数会自动转成255,而小于0的数会自动转成0,所以不需要我们做一个函数来负责这一工作。


复制代码 代码如下:

function convertScaleAbs(__src, __dst){
__src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
var height = __src.row,
width = __src.col,
channel = __src.channel,
sData = __src.data;

if(!__dst){
if(channel === 1)
dst = new Mat(height, width, CV_GRAY);
else if(channel === 4)
dst = new Mat(height, width, CV_RGBA);
else
dst = new Mat(height, width, CV_8I, channel);
}else{
dst = __dst;
}

var dData = dst.data;

var i, j, c;

for(i = height; i--;){
for(j = width * channel; j--;){
dData[i * width * channel + j] = Math.abs(sData[i * width * channel + j]);
}
}

return dst;
}

按比例合并值

我们还需要一个函数将x方向梯度计算值和y方向梯度计算值叠加起来。


复制代码 代码如下:

var addWeighted = function(__src1, __alpha, __src2, __beta, __gamma, __dst){
(__src1 && __src2) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
var height = __src1.row,
width = __src1.col,
alpha = __alpha || 0,
beta = __beta || 0,
channel = __src1.channel,
gamma = __gamma || 0;
if(height !== __src2.row || width !== __src2.col || channel !== __src2.channel){
error(arguments.callee, "Src2 must be the same size and channel number as src1!"/* {line} */);
return null;
}

if(!__dst){
if(__src1.type.match(/CV\_\d+/))
dst = new Mat(height, width, __src1.depth(), channel);
else
dst = new Mat(height, width, __src1.depth());
}else{
dst = __dst;
}

var dData = dst.data,
s1Data = __src1.data,
s2Data = __src2.data;

var i;

for(i = height * width * channel; i--;)
dData[i] = __alpha * s1Data[i] + __beta * s2Data[i] + gamma;

return dst;
};

这个函数很简单,实际上只是对两个矩阵的对应元素按固定比例相加而已。 效果图

时间: 2013-01-13

Java图像处理工具类

本工具类的功能:缩放图像.切割图像.图像类型转换.彩色转黑白.文字水印.图片水印等 复制代码 代码如下: package net.kitbox.util; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Re

Javascript图像处理—为矩阵添加常用方法

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

Javascript图像处理—阈值函数实例应用

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

Javascript图像处理—亮度对比度应用案例

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

java数字图像处理基础使用imageio写图像文件示例

一个BufferedImage的像素数据储存在Raster中,ColorModel里面储存颜色空间,类型等信息,当前Java只支持一下三种图像格式- JPG,PNG,GIF,如何向让Java支持其它格式,首先要 完成Java中的图像读写接口,然后打成jar,加上启动参数- Xbootclasspath/pnewimageformatIO.jar即可. Java中如何读写一个图像文件,使用ImageIO对象即可.读图像文件的代码如下: 复制代码 代码如下: File file = new File

Javascript图像处理—平滑处理实现原理

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

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

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

Javascript图像处理思路及实现代码

思路 HTML5的canvas提供了getImageData接口来获取canvas中的数据,所以我们能够先用drawImage接口将图片画在canvas上然后再通过getImageData得到图片数据矩阵. 需要注意,虽然IE9开始支持了canvas接口,但是其getImageData获取的数据并不是以标准的TypedArray方式存储的,或者说IE9没有提供对WebGL Native binary data的支持,所以如果需要对IE9支持,下面的矩阵需要用Array的方式保存.虽然IE9以下版

Javascript图像处理—虚拟边缘介绍及使用方法

前言 上一篇文章,我们来给矩阵添加一些常用方法,这篇文章将讲解图像的虚拟边缘. 虚拟边缘 虚拟边缘就是按照一定映射关系,给图像添加边缘. 那么虚拟边缘有什么用呢?比如可以很容易做一个倒影的效果:  当然这只是附带效果了,虚拟边缘主要用在图像卷积运算(例如平滑操作)时候,由于卷积运算的特点,需要将图片扩大才能对边角进行卷积运算,这时候就需要对图片进行预处理,添加虚拟边缘. 说白了,就是在一些图片处理前进行预处理. 边缘类型 这里参考OpenCV相关文档的边缘描述: 复制代码 代码如下: /* Va

javascript图像处理—仿射变换深度理解

前言 上一篇文章,我们讲解了图像金字塔,这篇文章我们来了解仿射变换. 仿射? 任何仿射变换都可以转换成,乘以一个矩阵(线性变化),再加上一个向量(平移变化). 实际上仿射是两幅图片的变换关系. 例如我们可以通过仿射变换对图片进行:缩放.旋转.平移等操作. 一个数学问题 在解决仿射问题前,我们来做一个数学题. 如图,对于点(x1, y1),相对于原点旋转一个角度a,那么这个点到哪里了呢? 我们将坐标系变成极坐标系,则点(x1, y1)就变成了(r, β),而旋转后变成(r, α+ β). 转回直角

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

JavaScript 数组的深度复制解析

对于javascript而言,数组是引用类型,如果要想复制一个数组就要动脑袋想想了,因为包括concat.slice在内的函数,都是浅层复制.也就是说,对于一个二维数组来说,用concat来做复制,第二维的数组还是引用,修改了新数组同样会使旧数组发生改变. 于是乎,想要写一个深度复制的函数,来帮助做组数的深度复制. 一般情况下,使用 "=" 可以实现赋值.但对于数组.对象.函数等这些引用类型的数据,这个符号就不好使了. 1. 数组的简单复制 1.1 简单遍历 最简单也最基础的方式,自然

javascript基础语法——全面理解变量和标识符

关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符 定义 标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie

深度理解c++中的this指针

1.this指针,就是一个指向当前对象的指针.我们知道,定义出一个类,它在内存中是不占空间的,只有定义了该类类型的对象时,系统就会为该对象分配一段存储空间,这段空间里只存储成员变量,对于成员函数,是存放在代码区的.(复习:内存分为5大区:静态区.常量区.栈.堆.代码区).下边给出一个日期类,通过这个实例,深度理解this指针. #define _CRT_SECURE_NO_WARNINGS 1 #include using namespace std; class Date { public:

javascript prototype的深度探索不是原型继承那么简单第1/3页

1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用.这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念.         前面我们说,对象的类(Class)和对象实例(Instance)之间是一种"创建"关系,因此我们把"类"看作是对象特征的模型化,而对象看作是类特征的具体化,或者说,类(Class)是对象的一个类型(Type).例如,在前面的例子中,p1和

JavaScript可否多线程? 深入理解JavaScript定时机制

例如 复制代码 代码如下: setTimeout( function(){ alert('你好!'); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了. 同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行

谈谈我对JavaScript DOM事件的理解

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

javascript 匿名函数的理解(透彻版)

复制代码 代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 半年前初次接触jQuery的时候,我也像其他人一样很兴奋地想看看源码是什么样的.然而,在看到源码的第一眼,我就迷糊了.为什么只有一个匿 名函数又没看到运行(当然是运行了--),就能有jQuery这么个函数库了?于是,我抱着疑问来到CSDN.结果相信现在很多人都很清楚了(因为在我之 后也不乏来者,呵呵~).当一个匿名函数被括起来,然后