CSS过滤器背后的数学是什么? [英] What is the mathematics behind the CSS filters?

问题描述

让我们说这些是我应用于图像的滤镜.我想知道这些过滤器背后的数学:

Let say these are the filters I've applied to an image. I want to know the mathematics behind these filters:

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

我正在寻找特定于CSS的计算或应用于每个像素RGB或整体的任何通用算法.任何帮助都将受到高度赞赏.

I'm looking for the calculations specific to the CSS or any generic algorithms applied to each pixel RGB or overall. Any help is highly appreciated.

推荐答案

您通过CSS过滤器函数传递的值基于该元素.

The values you pass the CSS filter functions are based on the element.

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

If you were adding sepia(0.3) this would apply 30% sepia filter.

将输入图像转换为棕褐色.传递的参数定义了 转换的比例.值为100％完全是棕褐色.一种 值为0％时，输入保持不变. 0％到100％之间的值是 线性乘法器的效果.金额超过100％的值是 允许，但UA必须将值限制为1.

Converts the input image to sepia. The passed parameter defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values of amount over 100% are allowed but UAs must clamp the values to 1.

如果要添加contrast(1.3)，则可以将图像的对比度提高130％，依此类推.

If you were adding contrast(1.3) this would up the contrast of the image 130% and so on.

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

You can read more information here: https://developer.mozilla.org/en/docs/Web/CSS/filter

=== 更新 ===

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

Here's some algorithms I've come across:

深褐色

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/灰度图像算法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)

来源: 查看全文