Javascript圖像處理——圖像金字塔

前言

上一篇文章，我們講解了邊緣梯度計算函數，這篇文章我們來了解圖像金字塔。

 

圖像金字塔？

圖像金字塔被廣泛用於計算機視覺應用中。

圖像金字塔是一個圖像集合，集合中所有的圖像都源於同一個原始圖像，而且是通過對原始圖像連續降采樣獲得的。

——《學習OpenCV》

常見的圖像金字塔有下面兩種：

• 高斯金字塔(Gaussian pyramid): 用來向下采樣
• 拉普拉斯金字塔(Laplacian pyramid): 用來從金字塔低層圖像重建上層未采樣圖像

 

高斯金字塔

類似金字塔一樣，高斯金字塔從底層原始圖逐漸向下采樣，越來越小。

那么如何獲取下一層圖像呢？

首先，和高斯內核卷積：

　　

然后，將所有偶數行列刪掉。

可見，這樣下一級圖像約為上一級的1/4。

那么向上變換如何變換呢？

首先先將圖片行列擴大為原來的兩倍，然后將添加的行列用0填充。

最后用剛剛的高斯內核乘以4后卷積。

 

高斯金字塔實現

var pyrDown = function(__src, __dst){
    __src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
    if(__src.type && __src.type == "CV_RGBA"){
        var width = __src.col,
            height = __src.row,
            dWidth = ((width & 1) + width) / 2,
            dHeight = ((height & 1) + height) / 2,
            sData = __src.data,
            dst = __dst || new Mat(dHeight, dWidth, CV_RGBA),
            dstData = dst.data;
        
        var withBorderMat = copyMakeBorder(__src, 2, 2, 0, 0),
            mData = withBorderMat.data,
            mWidth = withBorderMat.col;
        
        var newValue, nowX, offsetY, offsetI, dOffsetI, i, j;
        
        var kernel = [1,  4,  6,  4, 1,
                      4, 16, 24, 16, 4,
                      6, 24, 36, 24, 6,
                      4, 16, 24, 16, 4,
                      1,  4,  6,  4, 1
                     ];
        
        for(i = dHeight; i--;){
            dOffsetI = i * dWidth;
            for(j = dWidth; j--;){
                for(c = 3; c--;){
                    newValue = 0;
                    for(y = 5; y--;){
                        offsetY = (y + i * 2) * mWidth * 4;
                        for(x = 5; x--;){
                            nowX = (x + j * 2) * 4 + c;
                            newValue += (mData[offsetY + nowX] * kernel[y * 5 + x]);
                        }
                    }
                    dstData[(j + dOffsetI) * 4 + c] = newValue / 256;
                }
                dstData[(j + dOffsetI) * 4 + 3] = mData[offsetY + 2 * mWidth * 4 + (j * 2 + 2) * 4 + 3];
            }
        }
        
    }else{
        error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);
    }
    
    return dst;
};

dWidth = ((width & 1) + width) / 2,

dHeight = ((height & 1) + height) / 2

這里面a & 1等同於a % 2，即求除以2的余數。

我們實現時候沒有按照上面的步驟，因為這樣子效率就低了，而是直接創建一個原矩陣1/4的矩陣，然后卷積時候跳過那些要被刪掉的行和列。

下面也一樣，創建后卷積，由於一些地方一定是0，所以實際卷積過程中，內核有些元素是被忽略的。

var pyrUp = function(__src, __dst){
    __src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */);
    if(__src.type && __src.type == "CV_RGBA"){
        var width = __src.col,
            height = __src.row,
            dWidth = width * 2,
            dHeight = height * 2,
            sData = __src.data,
            dst = __dst || new Mat(dHeight, dWidth, CV_RGBA),
            dstData = dst.data;
        
        var withBorderMat = copyMakeBorder(__src, 2, 2, 0, 0),
            mData = withBorderMat.data,
            mWidth = withBorderMat.col;
        
        var newValue, nowX, offsetY, offsetI, dOffsetI, i, j;
        
        var kernel = [1,  4,  6,  4, 1,
                      4, 16, 24, 16, 4,
                      6, 24, 36, 24, 6,
                      4, 16, 24, 16, 4,
                      1,  4,  6,  4, 1
                     ];
        
        for(i = dHeight; i--;){
            dOffsetI = i * dWidth;
            for(j = dWidth; j--;){
                for(c = 3; c--;){
                    newValue = 0;
                    for(y = 2 + (i & 1); y--;){
                        offsetY = (y + ((i + 1) >> 1)) * mWidth * 4;
                        for(x = 2 + (j & 1); x--;){
                            nowX = (x + ((j + 1) >> 1)) * 4 + c;
                            newValue += (mData[offsetY + nowX] * kernel[(y * 2 + (i & 1 ^ 1)) * 5 + (x * 2 + (j & 1 ^ 1))]);
                        }
                    }
                    dstData[(j + dOffsetI) * 4 + c] = newValue / 64;
                }
                dstData[(j + dOffsetI) * 4 + 3] = mData[offsetY + 2 * mWidth * 4 + (((j + 1) >> 1) + 2) * 4 + 3];
            }
        }
        
    }else{
        error(arguments.callee, UNSPPORT_DATA_TYPE/* {line} */);
    }
    
    return dst;
};

 

效果圖

 

系列目錄

Javascript圖像處理系列

 

參考資料

Image Pyramids