javascript圖像處理—邊緣梯度計(jì)算函數(shù)

更新時(shí)間：2013年01月14日 09:15:38 作者：

上一篇文章，我們講解了圖像處理中的膨脹和腐蝕函數(shù)，這篇文章將做邊緣梯度計(jì)算函數(shù)，感興趣的朋友可以了解下

前言

上一篇文章，我們講解了圖像處理中的膨脹和腐蝕函數(shù)，這篇文章將做邊緣梯度計(jì)算函數(shù)。

圖像的邊緣

圖像的邊緣從數(shù)學(xué)上是如何表示的呢？

How intensity changes in an edge

圖像的邊緣上，鄰近的像素值應(yīng)當(dāng)顯著地改變了。而在數(shù)學(xué)上，導(dǎo)數(shù)是表示改變快慢的一種方法。梯度值的大變預(yù)示著圖像中內(nèi)容的顯著變化了。

用更加形象的圖像來(lái)解釋,假設(shè)我們有一張一維圖形。下圖中灰度值的“躍升”表示邊緣的存在：

　　　　 Intensity Plot for an edge

使用一階微分求導(dǎo)我們可以更加清晰的看到邊緣“躍升”的存在(這里顯示為高峰值)：

　　　　 First derivative of Intensity - Plot for an edge

由此我們可以得出：邊緣可以通過(guò)定位梯度值大于鄰域的相素的方法找到。

近似梯度

比如內(nèi)核為3時(shí)。

首先對(duì)x方向計(jì)算近似導(dǎo)數(shù)：

$G_{x} = \begin{bmatrix}-1 & 0 & +1 \\-2 & 0 & +2 \\-1 & 0 & +1\end{bmatrix} * I$

然后對(duì)y方向計(jì)算近似導(dǎo)數(shù)：

$G_{y} = \begin{bmatrix}-1 & -2 & -1 \\0 & 0 & 0 \\+1 & +2 & +1\end{bmatrix} * I$

然后計(jì)算梯度：

$G = \sqrt{ G_{x}^{2} + G_{y}^{2} }$

當(dāng)然你也可以寫成：

$G = |G_{x}| + |G_{y}|$

函數(shù)實(shí)現(xiàn)

復(fù)制代碼代碼如下:

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

這里只提供了內(nèi)核大小為3和5的Sobel算子，主要原因是7或以上的內(nèi)核計(jì)算就比較慢了。
輸出一個(gè)單通道的16位有符號(hào)整數(shù)矩陣。

復(fù)制代碼代碼如下:

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

然后把內(nèi)核和矩陣交給這個(gè)濾波器處理，就OK了。

把這個(gè)濾波器獨(dú)立出來(lái)的原因是，可以給其他類似的計(jì)算邊緣函數(shù)使用，比如Laplacian和Scharr算子。

轉(zhuǎn)為無(wú)符號(hào)8位整數(shù)

由于Sobel算子算出來(lái)的是16位有符號(hào)整數(shù)，無(wú)法顯示成圖片，所以我們需要一個(gè)函數(shù)來(lái)將其轉(zhuǎn)為無(wú)符號(hào)8位整數(shù)矩陣。

convertScaleAbs函數(shù)是將每個(gè)元素取絕對(duì)值，然后放到Int8Array數(shù)組里面，由于在賦值時(shí)候大于255的數(shù)會(huì)自動(dòng)轉(zhuǎn)成255，而小于0的數(shù)會(huì)自動(dòng)轉(zhuǎn)成0，所以不需要我們做一個(gè)函數(shù)來(lái)負(fù)責(zé)這一工作。

復(fù)制代碼代碼如下:

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

按比例合并值

我們還需要一個(gè)函數(shù)將x方向梯度計(jì)算值和y方向梯度計(jì)算值疊加起來(lái)。

復(fù)制代碼代碼如下:

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