画布 - 获取颜色位置（如果有）

Question

是否可以在画布上获取颜色的位置。

我知道你可以在这样的位置上获得颜色

context.getImageData( arguments ).data

但我想尝试在画布上找到一种颜色，所以说我会把这种颜色变黑。

rgb(0, 0, 0);

我想获得该颜色的位置，如果它存在于画布上，我已经问过Google，但我只得到获取位置颜色，这与我需要的相反。< / p>

Answer 1

您需要迭代data属性并检查RGB值。基本上，您将以4个为一组进行迭代，因为每个像素都存储为4个索引，并相应地比较这些值。

Answer 2

如前所述，您需要迭代像素缓冲区。

以下是一种方法：

（的 Online demo here ）

function getPositionFromColor(ctx, color) {

    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        data = ctx.getImageData(0, 0, w, h), /// get image data
        buffer = data.data,                  /// and its pixel buffer
        len = buffer.length,                 /// cache length
        x, y = 0, p, px;                     /// for iterating

    /// iterating x/y instead of forward to get position the easy way
    for(;y < h; y++) {

        /// common value for all x
        p = y * 4 * w;

        for(x = 0; x < w; x++) {

            /// next pixel (skipping 4 bytes as each pixel is RGBA bytes)
            px = p + x * 4;

            /// if red component match check the others
            if (buffer[px] === color[0]) {
                if (buffer[px + 1] === color[1] &&
                    buffer[px + 2] === color[2]) {

                    return [x, y];
                }
            }
        }
    }
    return null;
}

这将返回您给出的颜色（color = [r, g, b]）的第一个匹配项的x / y位置。如果未找到颜色，则函数返回null。

（代码可以通过各种方式进行优化，我在这里没有解决过。）