CSS filtrelerinin arkasındaki matematik nedir?

Question

Bunların bir görüntüye uyguladığım filtreler olduğunu varsayalım. Ben bu filtrelerden ardındaki matematik bilmek istiyorum: Ben CSS veya her piksel RGB veya genel uygulanan herhangi jenerik algoritmalara belirli hesaplamalar arıyorum

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

. Herhangi bir yardım çok takdir edilmektedir.

Answer 1

CSS filtre işlevlerini ilettiğiniz değerler öğeye dayanır.

sepia(0.3) ekliyorsanız, bu% 30 sepya filtresi uygular.

Giriş görüntüsünü sepyaya dönüştürür. Geçirilen parametre, dönüşümün oranını tanımlar. % 100'lük bir değer tamamen sepidir. 0% değeri, girişi değiştirmeden bırakır. % 0 ile% 100 arasındaki değerler, efekt üzerindeki doğrusal çarpanlardır. Bunu bu kadar olur contrast(1.3) görüntü% 130 kontrast ve ekleme olsaydı% 100'ün üzerinde miktarın Değerler izin vardır ama UAs 1.

değerleri kelepçe gerekir.

Daha fazla bilgiyi burada okuyabilirsiniz

: https://developer.mozilla.org/en/docs/Web/CSS/filter

=== GÜNCELLEME === Burada

bazı algoritmalar genelinde geldim oluyor:

sepya

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

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

gri tonlama

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

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

Renk ve doygunluk

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) 

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

Parlaklık

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) 

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