Javascript图像处理——图像形态学

系统 1858 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条评论