W naszym , nauczyliśmy naszą aplikację pracy z referencjami i paletami. Teraz nadszedł czas, aby dodać więcej opcji do subtelnego dostosowywania kolorów i efektów wizualnych. Poprzedni Tutorial Wprowadzimy kilka nowych narzędzi, które pozwalają na bardziej elastyczną manipulację obrazem. Ponadto będziemy badać nowy model kolorów, HSV, który działa z kolorami inaczej niż RGB i LAB. Ten model ułatwia manipulowanie cechami takimi jak odcień, nasycenie i lekkość, co czyni go szczególnie przydatnym do dostosowywania kolorów w obrazach. Pełny kod projektu dostępny jest na ... Ten link Ten link Adjusting the Number of Colors in the Extracted Palette Widzieliśmy już, jak ograniczenie palety może zmienić wygląd obrazu. Aby uzyskać bardziej elastyczne ustawienia filtrów i przetwarzania obrazu, dodamy możliwość sterowania liczbą kolorów pobranych z obrazu. Teraz możesz precyzyjnie ustawić, ile kolorów jest podkreślonych w obrazie, co pozwala na lepszą kontrolę nad efektami wizualnymi. ta funkcja jest szczególnie przydatna podczas pracy z paletami do tworzenia filtrów, ponieważ zmiana liczby kolorów ma zastosowanie do szerokiego zakresu zadań projektowych. Aplikacja ma teraz przełącznik, który pozwala wybrać liczbę kolorów wyodrębnionych z obrazu (od 10 do 20). <div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 Będziemy eksperymentować z niesamowitą fotografią So Sasaki Posiada szeroką gamę kolorów i odcieni, co czyni go idealnym przedmiotem do naszej eksploracji. Wygraj Tokio Poniżej możesz porównać, jak wygląda obraz z paletą różnych rozmiarów. Filter Intensity Slider Aby proces filtrowania stał się bardziej elastyczny, dodamy przełącznik do sterowania intensywnością aplikacji palety do obrazu. Wystarczy wybrać pożądaną intensywność filtra i kliknąć „Zastosuj filtr”. <div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 How does it work? Gdy intensywność zostanie ustawiona na 100%, obraz zostanie całkowicie przekształcony przy użyciu kolorów z wybranej palety.Im niższa wartość intensywności, tym mniejszy wpływ paleta ma na obraz, co pozwala zachować więcej oryginalnych kolorów. HSV Color Model HSV (Hue, Saturation, Value) to jeden z najpopularniejszych modeli kolorów, często używany do reprezentowania koloru pod względem odcienia, nasycenia i jasności. Odcień (kolor): reprezentuje kolor podstawowy (np. czerwony, zielony, niebieski itp.), mierzony w stopniach od 0 do 360. Na nasycenie wpływa ilość szarości w kolorze: 100% jest całkowicie nasyconym kolorem, a 0% jest szarym. Wartość (jaśniejsza): oznacza to, jak jasny jest kolor. Wartość 0% daje czarny, podczas gdy 100% jest najjaśniejszą wersją koloru. • : Differences from RGB and LAB W przeciwieństwie do RGB, gdzie kolory są łączone na podstawie intensywności czerwonego, zielonego i niebieskiego, HSV opiera się na ludzkiej percepcji wizualnej. W porównaniu z LAB, który wykorzystuje bardziej złożony model matematyczny do precyzyjnego przedstawienia kolorów w różnych warunkach oświetlenia, HSV jest bardziej intuicyjny i przyjazny dla użytkownika. Przykładowy kod do konwersji RGB na HSV: function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}
 Poniżej znajdują się przykłady obrazów w tej samej palecie, ale w różnych modelach kolorystycznych. Contrast Slider Kontrast odnosi się do różnicy między najjaśniejszymi i najciemniejszymi punktami na zdjęciu. Dostosowanie kontrastu pozwala zwiększyć lub zmniejszyć tę różnicę.Im wyższy kontrast, tym bardziej wyraźne będą jasne i ciemne obszary. How does contrast adjustment work? Gdy kontrast jest zwiększony, ciemne obszary obrazu stają się jeszcze ciemniejsze, a obszary światła stają się jeszcze jaśniejsze. Przykładowy kod do zmiany kontrastu: const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};
 • : Algorithm Description Algorytm kontrastu wykorzystuje współczynnik, który zależy od bieżącej wartości kontrastu. Ten współczynnik jest stosowany do każdego składnika koloru (czerwony, zielony i niebieski), dostosowując ich jasność w zależności od poziomu kontrastu. Noise Slider Dodawanie hałasu do obrazu pomaga stworzyć efekt vintage fotograficzny lub sprawia, że obraz czuje się bardziej „żywy”. How does the noise work? Przeglądarka hałasu pozwala kontrolować ilość przypadkowych zmian zastosowanych do koloru każdego piksela w obrazie.Im wyższa wartość hałasu, tym większa ilość przypadkowych zmian zastosowanych do obrazu. Gdy do obrazu dodaje się hałas, do wartości RGB każdego piksela wprowadzane są małe, losowe odmiany, co powoduje efekt ziarnisty. Ten efekt może być subtelny lub wyraźny, w zależności od ilości zastosowanego hałasu. const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};
 • : Algorithm Description Wartość losowa jest dodawana do każdego piksela w określonym zakresie. Stwarza to efekt losowych zmian koloru, nadając obrazowi hałaśliwy lub ziarnisty wygląd. W naszym przypadku po prostu symulujemy zniekształcenia, które nie mają nic wspólnego z prawdziwym ziarnem filmu lub hałasem. ) działał na tej samej zasadzie. Nowy Sony Ericsson W810 Kontrolując ilość hałasu, użytkownicy mogą eksperymentować z różnymi poziomami intensywności, aby osiągnąć różne efekty twórcze lub symulować niedoskonałości na zdjęciu. I oczywiście dodaliśmy przycisk Resetuj ustawienia, aby wyczyścić wszystkie filtry i powrócić do oryginalnego obrazu. Przez cały nasz artykuł zagłębiliśmy się w podstawy korekty kolorów i zbadaliśmy różne narzędzia i techniki do jej zastosowania.Badaliśmy, jak wyodrębnić i dostosować palety kolorów, efekty kontrastu, nasycenia i hałasu oraz jak pracować z różnymi modelami kolorów – RGB, LAB i HSV. Korekcja kolorów jest kluczowym aspektem przetwarzania obrazu, umożliwiającym poprawę percepcji wizualnej, podkreślenie pewnych elementów i osiągnięcie harmonii między kolorami.Demonstrowaliśmy, jak dostosowanie liczby kolorów w palecie lub modyfikacja ustawień kontrastu może całkowicie przekształcić obraz, czyniąc go bardziej ekspresyjnym i dynamicznym. Ważne jest, aby pamiętać, że korekty kolorów i kontrastu nie tylko wpływają na wygląd obrazu, ale także wpływają na to, jak jest postrzegany.

Read My Stories

Ten dźwięk jest produkowany w oryginalnym języku historii!

Za długo; Czytać

Make resilience your competitive advantage

Ta aplikacja internetowa zamienia dowolny obraz w sen o retro gorączce – nie jest potrzebny Photoshop

About Author

UWAGI

ZAWIEŚĆ TAGI

ARTYKUŁ TEN ZOSTAŁ PREZENTOWANY W

Related Stories

Reach More Readers! BOOST Your Story on HackerNoon

Meet Sora: HackerNoon Company of the Week

Pleasures of the telescope by Garrett Putman Serviss - Table of Links

Meet Sekurno: HackerNoon Company of the Week

Reach More Readers! BOOST Your Story on HackerNoon

Meet Sora: HackerNoon Company of the Week

Pleasures of the telescope by Garrett Putman Serviss - Table of Links

Meet Sekurno: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps