使用javascript检测颜色是否介于两种颜色之间

PaR*_*oJa 2 javascript getimagedata html5-canvas

我想检测图像的每个像素是否在两种颜色之间的范围内。我使用getImageData获得像素颜色,但现在我不知道它是否在范围内。任何的想法?谢谢

mar*_*rkE 6

在 HSL 颜色中,H 表示色调(我们通常认为的颜色)。如果您使用 HSL 颜色,您可以按照 Stano 的建议进行操作,只需计算任何像素色调与指定色调之间的线性距离。

HueDesired – HuePixel
Run Code Online (Sandbox Code Playgroud)

但是计算机图像通常在 RGB 颜色模型中定义。 RGB 使用混合颜色来制作您想要的颜色。使用 RGB,您可以通过计算它们在色轮上彼此的欧几里得距离来确定两种颜色是否“接近”。

这是一个计算指定颜色和像素颜色之间欧几里得距离的函数:

// find Euclidian distance from the pixel color to the specified color 
//
function colorDistance(colorRed,colorGreen,colorBlue,pixelRed,pixelGreen,pixelBlue){

    var diffR,diffG,diffB;

    // distance to color
    diffR=( colorRed - pixelRed );
    diffG=( colorGreen - pixelGreen );
    diffB=( colorBlue - pixelBlue );
    return(Math.sqrt(diffR*diffR + diffG*diffG + diffB*diffB));

}
Run Code Online (Sandbox Code Playgroud)

由于您想将像素与 2 种颜色进行比较,只需为您的 2 种颜色运行此函数。

由您来确定您的 2 种颜色与像素颜色之间的“可接受”距离是多少,但此功能将为您提供一个可以使用的测量工具。