Javascript 画布-获取颜色位置（如果可用）

是否有可能得到画布上颜色的位置

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

context.getImageData( arguments ).data

但我想尝试在画布上找到一种颜色，所以我会选择黑色

rgb(0, 0, 0);

---

如果颜色存在于画布上，我想得到它的位置，我已经询问过谷歌，但我只得到了位置处的get color，这与我需要的正好相反。

您需要迭代

数据

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

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

以下是一种方法：

（）

函数getPositionFromColor（ctx，颜色）{ var w=ctx.canvas.width， h=ctx.canvas.height， data=ctx.getImageData（0，0，w，h），///获取图像数据 buffer=data.data，///及其像素缓冲区 len=buffer.length，///缓存长度 x、 y=0，p，px；///用于迭代 ///迭代x/y而不是向前，以简单的方式获得位置 对于（；y 这将返回给定颜色的第一个匹配的x/y位置（

color=[r，g，b]

）。如果未找到颜色，函数将返回

null

---

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

当颜色位于多个位置（例如，整个画布为黑色）时，您希望它返回什么？它找到的第一个。那么有像素吗？假设迭代的顺序是最优的，它会找到最上面的，或者如果是平局的话，找到最左边的，如果你遵循Jani的答案。任何像素都是的，你找到的第一个最接近颜色的像素，你开始做什么并不重要。我在想，但是如果你有一张

500x500

的图片，循环62000次真的很糟糕吗？62000？500x500图像中有250000像素。你别无选择。此外，在现代浏览器中，很多东西在运行前都会编译成机器代码，只要每帧不使用250000次，它的运行速度就足够快了。+1因为250000像素中的每一个都由4条信息（r、g、b、a）表示，所以实际上，您正在检查多达100万条信息。尽管如此，计算机速度很快，因此可以相对较快地找到您的像素。另外，在检查所有250K之前，你可能会找到你的黑色像素，然后到此为止。你说4人一组，所以我把它除以4，我的不好。谢谢，你有什么建议（不是为我这样做）关于如何获得问题中所述的最接近的颜色，我不太清楚它是怎么做到的。@Pinocchio你可以加上一个公差值，然后用+/-这个公差检查组件。F.ex。如果公差为10%，则检查

if（r>=buffer[0]/1.1&&r
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;
}