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.

questionAnswers(7)

yourAnswerToTheQuestion