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

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/