亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Javascript圖像處理——圖像形態學

系統 2054 0

前言

上一篇文章 ,我們講解了圖像處理中的閾值函數,這一篇文章我們來做膨脹和腐蝕函數。

?

膨脹與腐蝕

說概念可能很難解釋,我們來看圖,首先是原圖:

膨脹以后會變成這樣:

腐蝕以后則會變成這樣:

看起來可能有些莫名其妙,明明是膨脹,為什么字反而變細了,而明明是腐蝕,為什么字反而變粗了。

實際上,所謂膨脹應該指:

較亮色塊膨脹。

而所謂腐蝕應該指:

較亮色塊腐蝕。

上面圖里面,由于背景白色是較亮色塊,所以膨脹時就把黑色較暗色塊的字壓扁了……相反腐蝕時,字就吸水膨脹了……

用數學公式表示就是:

Javascript圖像處理——圖像形態學_第1張圖片

說白了就是在指定大小的內核里找最暗或者最亮的像素點,并用該點替換掉內核錨點上的像素。?

?

實現

首先我們來實現膨脹dilate函數。

      
        var
      
       dilate = 
      
        function
      
      
        (__src, __size, __borderType, __dst){
    __src 
      
      || error(arguments.callee, IS_UNDEFINED_OR_NULL
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
    
      
      
        if
      
      (__src.type && __src.type == "CV_RGBA"
      
        ){
        
      
      
        var
      
       width =
      
         __src.col,
            height 
      
      =
      
         __src.row,
            size 
      
      = __size || 3
      
        ,
            dst 
      
      = __dst || 
      
        new
      
      
         Mat(height, width, CV_RGBA),
            dstData 
      
      =
      
         dst.data;
        
        
      
      
        var
      
       start = size >> 1
      
        ;
        
      
      
        var
      
       withBorderMat = copyMakeBorder(__src, start, start, 0, 0
      
        , __borderType),
            mData 
      
      =
      
         withBorderMat.data,
            mWidth 
      
      =
      
         withBorderMat.col;
        
        
      
      
        var
      
      
         newOffset, total, nowX, offsetY, offsetI, nowOffset, i, j;
        
        
      
      
        if
      
      (size & 1 === 0
      
        ){
            error(arguments.callee, UNSPPORT_SIZE
      
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
            
      
      
        return
      
      
         __src;
        }
        
        
      
      
        for
      
      (i = height; i--
      
        ;){
            offsetI 
      
      = i *
      
         width;
            
      
      
        for
      
      (j = width; j--
      
        ;){
                newOffset 
      
      = 0
      
        ;
                total 
      
      = 0
      
        ;
                
      
      
        for
      
      (y = size; y--
      
        ;){
                    offsetY 
      
      = (y + i) * mWidth * 4
      
        ;
                    
      
      
        for
      
      (x = size; x--
      
        ;){
                        nowX 
      
      = (x + j) * 4
      
        ;
                        nowOffset 
      
      = offsetY +
      
         nowX;
                        (mData[nowOffset] 
      
      + mData[nowOffset + 1] + mData[nowOffset + 2] > total) && (total = mData[nowOffset] + mData[nowOffset + 1] + mData[nowOffset + 2]) && (newOffset =
      
         nowOffset);
                    }
                }
                dstData[(j 
      
      + offsetI) * 4] =
      
         mData[newOffset];
                dstData[(j 
      
      + offsetI) * 4 + 1] = mData[newOffset + 1
      
        ];
                dstData[(j 
      
      + offsetI) * 4 + 2] = mData[newOffset + 2
      
        ];
                dstData[(j 
      
      + offsetI) * 4 + 3] = mData[newOffset + 3
      
        ];
            }
        }
        
    }
      
      
        else
      
      
        {
        error(arguments.callee, UNSPPORT_DATA_TYPE
      
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
    }
    
      
      
        return
      
      
         dst;
};
      
    

(mData[nowOffset] + mData[nowOffset + 1] + mData[nowOffset + 2] > total) && (total = mData[nowOffset] + mData[nowOffset + 1] + mData[nowOffset + 2]) && (newOffset = nowOffset);

這行代碼里面,我們先用RGB的數值和與上一個最大值total對比,然后如果新的值比較大,就把新的值賦給total,并把新的偏移量newOffset賦值當前偏移量nowOffset。

然后整個內核大小的面積循環完了就可以找到一個最大的total以及對應的偏移量newOffset。就可以賦值了:

dstData[(j + offsetI) * 4] = mData[newOffset];
dstData[(j + offsetI) * 4 + 1] = mData[newOffset + 1];
dstData[(j + offsetI) * 4 + 2] = mData[newOffset + 2];
dstData[(j + offsetI) * 4 + 3] = mData[newOffset + 3];

那么腐蝕erode函數則相反,找一個最小的值就行了。

      
        var
      
       erode = 
      
        function
      
      
        (__src, __size, __borderType, __dst){
    __src 
      
      || error(arguments.callee, IS_UNDEFINED_OR_NULL
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
    
      
      
        if
      
      (__src.type && __src.type == "CV_RGBA"
      
        ){
        
      
      
        var
      
       width =
      
         __src.col,
            height 
      
      =
      
         __src.row,
            size 
      
      = __size || 3
      
        ,
            dst 
      
      = __dst || 
      
        new
      
      
         Mat(height, width, CV_RGBA),
            dstData 
      
      =
      
         dst.data;
        
        
      
      
        var
      
       start = size >> 1
      
        ;
        
      
      
        var
      
       withBorderMat = copyMakeBorder(__src, start, start, 0, 0
      
        , __borderType),
            mData 
      
      =
      
         withBorderMat.data,
            mWidth 
      
      =
      
         withBorderMat.col;
        
        
      
      
        var
      
      
         newOffset, total, nowX, offsetY, offsetI, nowOffset, i, j;
        
        
      
      
        if
      
      (size & 1 === 0
      
        ){
            error(arguments.callee, UNSPPORT_SIZE
      
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
            
      
      
        return
      
      
         __src;
        }
        
        
      
      
        for
      
      (i = height; i--
      
        ;){
            offsetI 
      
      = i *
      
         width;
            
      
      
        for
      
      (j = width; j--
      
        ;){
                newOffset 
      
      = 0
      
        ;
                total 
      
      = 765
      
        ;
                
      
      
        for
      
      (y = size; y--
      
        ;){
                    offsetY 
      
      = (y + i) * mWidth * 4
      
        ;
                    
      
      
        for
      
      (x = size; x--
      
        ;){
                        nowX 
      
      = (x + j) * 4
      
        ;
                        nowOffset 
      
      = offsetY +
      
         nowX;
                        (mData[nowOffset] 
      
      + mData[nowOffset + 1] + mData[nowOffset + 2] < total) && (total = mData[nowOffset] + mData[nowOffset + 1] + mData[nowOffset + 2]) && (newOffset =
      
         nowOffset);
                    }
                }
                dstData[(j 
      
      + offsetI) * 4] =
      
         mData[newOffset];
                dstData[(j 
      
      + offsetI) * 4 + 1] = mData[newOffset + 1
      
        ];
                dstData[(j 
      
      + offsetI) * 4 + 2] = mData[newOffset + 2
      
        ];
                dstData[(j 
      
      + offsetI) * 4 + 3] = mData[newOffset + 3
      
        ];
            }
        }
        
    }
      
      
        else
      
      
        {
        error(arguments.callee, UNSPPORT_DATA_TYPE
      
      
        /*
      
      
         {line} 
      
      
        */
      
      
        );
    }
    
      
      
        return
      
      
         dst;
};
      
    

?

效果

Javascript圖像處理——圖像形態學_第2張圖片

Javascript圖像處理——圖像形態學_第3張圖片

?

系列目錄

Javascript圖像處理系列

?

? 參考資料

Eroding and Dilating

Javascript圖像處理——圖像形態學


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 中文字幕一二区 | 欧美午夜不卡 | 亚洲成人日韩 | 久久www免费人成高清 | 老司机午夜在线视频免费观 | a毛片视频免费观看影院 | 日本美女视频韩国视频网站免费 | 精品国产人成亚洲区 | japanese国产高清麻豆 | 欧美日韩亚洲m码色帝国 | 欧美久 | 国产精品视频男人的天堂 | 888奇米 | 亚洲综合亚洲综合网成人 | 久久精品国产免费 | 日本免费在线一区 | 色婷婷色婷婷 | 亚洲图片欧美日韩 | 亚洲va欧美va国产va天堂影 | 亚洲热热久久九九精品 | 久久精品国产亚洲 | sese在线播放 | 成人欧美一区二区三区在线 | 最新国产一区二区精品久久 | 5060网永久免费一级毛片 | 国产爽片在线观看 | 99久久精品免费 | 四虎永久在线精品影院 | 视频一区国产精戏刘婷 | 亚洲精品国产美女在线观看 | 中文字幕精品一区二区精品 | 日韩欧一级毛片在线播无遮挡 | 在线观看视频色 | 中文字幕三级久久久久久 | 亚洲精品久久久久综合中文字幕 | 欧美影院一区 | 亚洲国产第一 | 亚洲 欧美 综合 | 国产在线精品二区赵丽颖 | 欧美日韩三级 | 久久美女精品国产精品亚洲 |