使模糊算法適用於畫布圖像數據？

Question

我有以下簡單的模糊算法：

for (y = 0; y < height; ++y) { 
    for (x = 0; x < width; ++x) { 
     total = 0 
      for (ky = -radius; ky <= radius; ++ky) 
       for (kx = -radius; kx <= radius; ++kx) 
        total += source(x + kx, y + ky) 
      dest(x, y) = total/(radius * 2 + 1)^2 
     } 
    } 

，我需要做這項工作有一個數組，由帆布getImageData產生的（）。問題是來自畫布的數組是一維的，並且該算法需要二維的算法，因爲「kx」和「ky」是距離當前像素的距離，並且在二維數組中，您只需更改其中一個索引爲了在網格上向左或向右移動，但是在一維數組中（它試圖表示一個二維模型），你不能那樣做。

您怎麼看，我該如何處理這個問題？在我看來，整個問題就在這裏：

total += source(x + kx, y + ky) 

此行需要得到一維數組正確的像素，它應該工作的罰款。

P.S.我忘了說，我想在一個時間模糊圖像一個通道，這樣的：

for (var i=0; i<imgData.data.length; i+=4) { 
    red[index] = imgData.data[i]; 
    green[index] = imgData.data[i+1]; 
    blue[index] = imgData.data[i+2]; 

    index++; 
} 

，我路過的每個陣列（紅，綠，藍）單獨的算法。

Answer 1

爲了訪問具有二維座標的一維陣列，則有以下公式：

var pixel = pixels[ ((y * width) + x) * 4 ]; 

的*加到4以考慮R，G，B，A的值。 x分辨率是圖像的寬度。

所以源（）將是：

function source(imageArray, x, y, imageWidth) 
{ 
    var pos = ((y * imageWidth) + x) * 4; 
    var val = 
    { 
     r : imageArray[ pos ], 
     g : imageArray[ pos + 1 ], 
     b : imageArray[ pos + 2 ], 
     a : imageArray[ pos + 3 ] 
    }; 

    return val; 
}