Kontekst obrazu HTML5 Canvas
Pisałem program do przetwarzania obrazów, który stosuje efekty poprzez przetwarzanie pikseli pikseli HTML5. Osiągnąłem manipulacje pikselowe Thresholding, Vintaging i ColorGradient, ale niewiarygodnie nie mogę zmienić kontrastu obrazu! Próbowałem wielu rozwiązań, ale zawsze dostaję zbyt dużo jasności obrazu i mniej efektu kontrastui nie planuję używać żadnych bibliotek Javascript, ponieważ staram się osiągnąć te efekty natywnie.
Podstawowy kod manipulacji pikselami:
<code>var data = imageData.data; for (var i = 0; i < data.length; i += 4) { //Note: data[i], data[i+1], data[i+2] represent RGB respectively data[i] = data[i]; data[i+1] = data[i+1]; data[i+2] = data[i+2]; } </code>Przykład manipulacji pikseli
Wartości są w trybie RGB, co oznacza, że dane [i] to kolor czerwony. Więc jeśli dane [i] = dane [i] * 2; jasność zostanie zwiększona do dwukrotności dla kanału czerwonego tego piksela. Przykład:
<code>var data = imageData.data; for (var i = 0; i < data.length; i += 4) { //Note: data[i], data[i+1], data[i+2] represent RGB respectively //Increases brightness of RGB channel by 2 data[i] = data[i]*2; data[i+1] = data[i+1]*2; data[i+2] = data[i+2]*2; } </code>
*Uwaga: nie proszę was o uzupełnienie kodu! To byłaby tylko przysługa! Pytam o algorytm (nawet kod Pseudo), który pokazuje, jak możliwy jest kontrast w manipulacji pikselami! Byłbym zadowolony, gdyby ktoś mógł dostarczyć dobry algorytm dla kontrastu obrazu w płótnie HTML5.