[1] Change Parameters (opis) - Patrycja20/ImageChanger GitHub Wiki

Change Parameters

Pierwszym modułem jest edytor obrazów, umożliwiający zmianę różnych parametrów (Change Parameters). Całość zbudowana jest w oparciu o Canvas z HTML5. Wielkość modułu to 800 linii kodu.

Po lewej stronie widzimy wyszarzone kontrolki do modyfikacji parametrów obrazka. Po prawej jest przycisk umożliwiający załadowanie zdjęcia. Poniżej widzimy pusty Canvas, na który zdjęcie zostanie załadowane.

Po załadowaniu zdjęcia, Canvas zmienia swoje proporcje by się do niego dostosować, a wszystkie kontrolki stają się aktywne. Na górnym pasku strony pojawia się przycisk umożliwiający zapis zdjęcia po modyfikacjach do pliku *.jpg. Obok nazwy aktualnie wybranego pliku wyświetla się jego rozmiar, który nie powinien przekraczać 5 Mpix. Na tak dużych obrazkach operacje (obliczenia) wykonują się dłużej. Podczas próby załadowania dużego obrazka, wyświetla się ostrzeżenie o wolniejszym działaniu skryptu.

Kontrolki zostały podzielone na 3 sekcje - pierwsza z nich zawiera checkboxy -> r , g i b, które domyślnie są zaznaczone. Odznaczenie checkboxa powoduje usunięcie wybranej warstwy koloru ze zdjęcia, w powyższym screenie została usunięta warstwa b.

Druga sekcja zawiera inputy typu 'range' określające zakres zmian parametrów zdjęcia:

• Brightness - umożliwia zmianę jasności.
• Contrast - podbija albo obniża kontrast.
• Saturation - zmienia nasycenie barw.
• Vignetting - tworzy efekt winiety.
• Number Of Shades - to ilość odcieni szarości, które zostaną użyte na zdjęciu.

Ostatnia sekcja to dwa checkboxy, których zaznaczenie:

• Black And White - zamienia zdjęcie na czarno-biały.
• Inverted Colors - dokonuje odwrócenia kolorów na zdjęciu.

Przycisk Reset umożliwia przywrócenie wszystkich wartości do stanu domyślnego. Mamy też możliwość resetowania pojedynczych kontrolek. Możemy to robić przez dwuklik na nazwę kontrolki.

Technikalia

Po wczytaniu obrazek ładowany jest na Canvas. W miedzy czasie odczytywana jest szerokość i wysokość. Następnie skrypt oczekuje na działania użytkownika.

Gdy użytkownik zmieni jakąkolwiek kontrolkę, jest wysyłana akcja zmieniająca odpowiedni wycinek stanu aplikacji. Komponent z canvasem nasłuchuje na jakąkolwiek zmianę, i reaguje dopiero wtedy, gdy użytkownik puści przycisk myszy. Wtedy są nakładane wszystkie zmiany. Dzieje się to w pętli, która iteruje po wszystkich pikselach obrazka. Tablica z pikselami ma postać [r, g, b, alfa, r, g, b, alfa, r, g, b, alfa, ...]. Dlatego indeks co iterację skacze w górę o cztery wartości. Pętla ta, oraz wszystkie obliczenia na pikselach są wykonywane w pliku src/components/ChangeParameters/cpModifiers.js. W pętli na każdy piksel są nakładane wszystkie efekty. Po każdej zmianie parametru przez użytkownika zmiany są nakładane na wejściowy obrazek od nowa. Skrypt też sprawdza, by żadna wartość składowej RGB nie wyszła poza zakres [0, 255]. Poszczególne efekty są robione następująco:

• Brightness- do każdej składowej RGB jest dodawana (bądź odejmowana) wartość z kontrolki.
• Contrast - wyliczany jest współczynnik, o który później jest zmieniana każda składowa (value - wartość z kontrolki):

  factor = (259 * (value + 255)) / (255 * (259 - value));
  r = factor * (r - 128) + 128;
  g = factor * (g - 128) + 128;
  b = factor * (b - 128) + 128;

• Saturation - wyliczany jest współczynnik, który jest odpowiednio dodawany i odejmowany od składowej (przemnożywszy wcześniej przez value, czyli wartość z kontrolki):

  const Pr = 0.299;
  const Pg = 0.587;
  const Pb = 0.114;
  const P = Math.sqrt((r) * (r) * Pr + (g) * (g) * Pg + (b) * (b) * Pb);
  r = P + (r - P) * value;
  g = P + (g - P) * value;
  b = P + (b - P) * value;

• Vignetting - Winieta jest dodawana poprzez narysowanie dwóch kół. Środek pierwszego znajduje się w środku załadowanego obrazka, rozciągającego się do wierzchołków. Pierwsze koło ma czarny kolor z alfa = 80%. Drugie koło rozpościera się do wartości z filtra, odpowiednio przemnożonej przez współczynnik. Drugie koło jest w całości przeźroczyste.

• Number Of Shades - 8-bitowy zakres jest dzielony przez wartość z kontrolki. Następnie obliczana jest średnia ze składowych pikseli RGB. Później kolor każdej składowej jest wyliczany ze wzoru (averageValue / conversionFactor) + 0.5) * conversionFactor.

  conversionFactor = 255 / value;
  averageValue = (r + g + b) / 3;
  r = g = b = parseInt((averageValue / conversionFactor) + 0.5) * conversionFactor;

• Black and White - Składowe są wymnażana przez odpowiednie współczynniki: r = g = b = (r * 0.2126 + g * 0.7152 + b * 0.0722);

• Inverted Color - Każda składowa RGB jest odejmowana od 255.

• R, G, B - Gdy checkbox jest odznaczony, do wartości danej składowej jest przypisywane 0.

Po wszystkich przekształceniach z tablica pikseli jest rysowana na canvasie jako obraz. Działanie skryptu zostaje zakończone i oczekuje on znowu na działania użytkownika