javascript - Canvas - 获取颜色的位置（如果可用）

Question

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

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

context.getImageData( arguments ).data

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

rgb(0, 0, 0);

如果它存在于画布上，我想获得该颜色的位置，我已经问过谷歌，但我只能在与我需要的相反的位置获得颜色。

Answer 1

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

Answer 2

如前所述，您需要遍历像素缓冲区。

这是您可以做到的一种方法：

（在线演示在这里）

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

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

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