使模糊算法与画布图像数据工作

Making a blur algorithm work with canvas image data?

本文关键字：图像 数据 工作 布图像 模糊 算法      更新时间：2023-09-26

我有以下简单的模糊算法:

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()生成。问题是来自canvas的数组是一维的，而算法需要一个二维的，因为"kx"answers"ky"是到当前像素的距离，而在二维数组中，您只需改变其中一个索引以便在网格上向左或向右移动，但在一维数组中(它试图表示二维数组)。第一，你不能那样做。

你认为我应该如何处理这个问题?在我看来，整个问题在这里:

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

这一行需要从一维数组中获得正确的像素，它应该可以正常工作。

注:我忘了说，我试图一次模糊一个通道的图像，像这样:

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++;
}

我将每个数组(红色，绿色和蓝色)分别传递给算法

为了访问具有二维坐标的单维数组，需要使用以下公式:

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

添加* 4是为了说明r,g,b,a的值。xResolution是指图像的宽度。

那么source()将是:

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;
}
相关文章：