Javascript圖像處理—閾值函數(shù)實(shí)例應(yīng)用
上一篇文章，我們講解了圖像處理中的亮度和對(duì)比度的變化，這篇文章我們來(lái)做一個(gè)閾值函數(shù)。
最簡(jiǎn)單的圖像分割方法
閾值是最簡(jiǎn)單的圖像分割方法。
比如為了從下圖中分割出蘋果，我們利用前景與背景的灰度差值，通過(guò)設(shè)定一個(gè)閾值，對(duì)于該像素大于這個(gè)閾值時(shí)就以黑色表示，小于便以灰色表示。
五種閾值類型
和OpenCV一樣，我們將提供五種閾值類型，方便使用。
下面是原圖像的波形表示，縱坐標(biāo)表示像素點(diǎn)的灰度值大小，藍(lán)線是閾值大小。
公式表示是：
圖像表示是：
可見超過(guò)該閾值的就變成最大值（即255），否則變成最小值（也就是0）。我們需要一個(gè)函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能：
var CV_THRESH_BINARY = function(__value, __thresh, __maxVal){
return __value > __thresh ? __maxVal : 0;
};
反二進(jìn)制閾值化
公式表示是：
圖像表示是：
這個(gè)則反過(guò)來(lái)，超過(guò)閾值的變成最小值，否則變成最大值。函數(shù)實(shí)現(xiàn)是：
var CV_THRESH_BINARY_INV = function(__value, __thresh, __maxVal){
return __value > __thresh ? 0 : __maxVal;
};
截?cái)嚅撝祷?/STRONG>
公式表示是：
圖像表示是：
可見這個(gè)是超過(guò)閾值的就被截?cái)?。函?shù)實(shí)現(xiàn)是：
var CV_THRESH_TRUNC = function(__value, __thresh, __maxVal){
return __value > __thresh ? __thresh : 0;
};
閾值化為0
公式表示是：
圖像表示是：
這個(gè)則是小于閾值的都化為0處理。函數(shù)實(shí)現(xiàn)：
var CV_THRESH_TOZERO = function(__value, __thresh, __maxVal){
return __value > __thresh ? __value : 0;
};
反閾值化為0
公式表示是：
圖像表示是：
這個(gè)則在超過(guò)閾值時(shí)候置為0，函數(shù)實(shí)現(xiàn)是：
var CV_THRESH_TOZERO_INV = function(__value, __thresh, __maxVal){
return __value > __thresh ? 0 : __value;
};
閾值處理函數(shù)實(shí)現(xiàn)
然后我們做一個(gè)函數(shù)對(duì)整幅圖進(jìn)行上面這幾種類型的閾值處理。
var threshold = function(__src, __thresh, __maxVal, __thresholdType, __dst){
(__src && __thresh) || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
if(__src.type && __src.type == "CV_GRAY"){
var width = __src.col,
height = __src.row,
sData = __src.data,
dst = __dst || new Mat(height, width, CV_GRAY),
dData = dst.data,
maxVal = __maxVal || 255,
threshouldType = __thresholdType || CV_THRESH_BINARY;
var i, j, offset;
for(i = height; i--;){
for(j = width; j--;){
offset = i * width + j;
dData[offset] = threshouldType(sData[offset], __thresh, maxVal);
}
}
}else{
error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);
}
return dst;
};
這個(gè)函數(shù)比較簡(jiǎn)單，就是對(duì)每個(gè)像素點(diǎn)賦值為
threshouldType(sData[offset], __thresh, maxVal)
返回的數(shù)值。
相關(guān)文章
JavaScript html5 canvas繪制時(shí)鐘效果(二)
這篇文章主要介紹了JavaScript html5繪制時(shí)鐘效果的相關(guān)資料，使用HTML5的canvas標(biāo)簽和Javascript腳本，模擬顯示了一個(gè)時(shí)鐘，感興趣的小伙伴們可以參考一下2016-03-03
在純靜態(tài)網(wǎng)站里，有時(shí)候會(huì)動(dòng)態(tài)更新某個(gè)區(qū)域往會(huì)選擇?Pjax（swup、barba.js）去處理。本文主要和大家分享下Pjax下載動(dòng)態(tài)加載插件方案，感興趣的可以了解一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了JScript實(shí)現(xiàn)地址選擇功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法
下面小編就為大家?guī)?lái)一篇解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
原生js+cookie實(shí)現(xiàn)購(gòu)物車功能的方法分析
這篇文章主要介紹了原生js+cookie實(shí)現(xiàn)購(gòu)物車功能的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合cookie存儲(chǔ)實(shí)現(xiàn)購(gòu)物車功能的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了手把手教你 CKEDITOR 4 擴(kuò)展插件制作,結(jié)合具體實(shí)例形式詳細(xì)分析了CKEditor4插件制作的步驟與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
詳解uniapp分包的實(shí)現(xiàn)方式及優(yōu)點(diǎn)
當(dāng)今移動(dòng)應(yīng)用開發(fā)領(lǐng)域,隨著用戶對(duì)于應(yīng)用功能和體驗(yàn)的要求不斷提高,應(yīng)用程序的復(fù)雜度也在不斷增加,在這種情況下,應(yīng)用程序的體積也隨之增大,為了解決這個(gè)問題,Uniapp提供了分包功能,本文將詳細(xì)介紹Uniapp分包的功能和優(yōu)勢(shì),包括如何通過(guò)配置文件實(shí)現(xiàn)分包2023-09-09
原生js實(shí)現(xiàn)簡(jiǎn)單貪吃蛇小游戲
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細(xì)介紹了Javascript的原型和原型鏈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對(duì)象。Function對(duì)象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對(duì)象中this的指向。2015-10-10