Was ist die Mathematik hinter den CSS-Filtern?

Question

Sagen wir, das sind die Filter, die ich auf ein Bild angewendet habe. Ich möchte die Mathematik hinter diesen Filter wissen:

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

Ich bin auf jeden Pixel RGB angelegt für die Berechnungen der spezifisch auf die CSS oder irgendwelchen generische Algorithmen oder Gesamt suchen. Jede Hilfe wird sehr geschätzt.

Answer 1

Die Werte, die Sie den CSS-Filterfunktionen übergeben, basieren auf dem Element.

Wenn Sie sepia(0.3) hinzufügen, würde dies 30% Sepia-Filter gelten.

Konvertiert das eingegebene Bild in Sepia. Der übergebene Parameter definiert den Anteil der Konvertierung. Ein Wert von 100% ist komplett Sepia. Ein Wert von 0% lässt den Eingang unverändert. Werte zwischen 0% und 100% sind lineare Multiplikatoren auf dem Effekt. Werte der Menge von über 100% sind erlaubt, aber UAs müssen die Werte auf 1.

klemmen Wenn Sie den Kontrast des Bildes 130% contrast(1.3) dies würde und so weiter hinzugefügt wurden.

Sie hier weitere Informationen lesen können: https://developer.mozilla.org/en/docs/Web/CSS/filter

=== UPDATE ===

Hier einige Algorithmen Ich bin gekommen, across:

Sepia

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

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

Graustufen-

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

Quelle: http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/

Farbton und Sättigung

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) 

Quelle: https://stackoverflow.com/a/9177602/5814976

Helligkeit

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) 

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