Question

假设这些是我应用于图像的滤镜。我想知道这些过滤器背后的数学：

filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);

我正在寻找特定于CSS的计算或应用于每个像素RGB或整体的任何通用算法。任何帮助都非常感谢。

Answer 1

传递CSS过滤器函数的值基于元素。

如果您要添加sepia(0.3)，则会应用30％的棕褐色过滤器。

将输入图像转换为棕褐色。传递的参数定义了转换比例。 100％的价值完全是棕褐色。一个值0％使输入保持不变。 0％到100％之间的值是关于效果的线性乘数。金额超过100％的是允许但UAs必须将值限制为1。

如果您要添加contrast(1.3)，这会使图像的对比度提高130％，依此类推。

您可以在此处阅读更多信息： https://developer.mozilla.org/en/docs/Web/CSS/filter

=== 更新 ===

以下是我遇到的一些算法：

<强>褐色

outputRed = (inputRed * .393) + (inputGreen *.769) + (inputBlue * .189)
outputGreen = (inputRed * .349) + (inputGreen *.686) + (inputBlue * .168)
outputBlue = (inputRed * .272) + (inputGreen *.534) + (inputBlue * .131)

来源：http://www.techrepublic.com/blog/how-do-i/how-do-i-convert-images-to-grayscale-and-sepia-tone-using-c/

<强>灰度

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

来源：http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/

色调和饱和度

color = blend2(rgb(128, 128, 128), hueRGB, saturation);

if (lightness <= -1)
    return black;
else if (lightness >= 1)
    return white;

else if (lightness >= 0)
    return blend3(black, color, white, 2 * (1 - lightness) * (value - 1) + 1)
else
    return blend3(black, color, white, 2 * (1 + lightness) * (value) - 1)

来源：https://stackoverflow.com/a/9177602/5814976

<强>亮度

colour = GetPixelColour(x, y)
newRed   = Truncate(Red(colour)   + brightness)
newGreen = Truncate(Green(colour) + brightness)
newBlue  = Truncate(Blue(colour)  + brightness)
PutPixelColour(x, y) = RGB(newRed, newGreen, newBlue)

来源：http://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-4-brightness-adjustment/

CSS过滤器背后的数学是什么？

1 个答案: