MeidänEdellinen Tutorial, opimme sovelluksemme työskentelemään viittausten ja palettien kanssa. Nyt on aika lisätä lisää vaihtoehtoja hienosäätöväreille ja visuaalisille tehosteille.
Esittelemme muutamia uusia työkaluja, jotka mahdollistavat joustavamman kuvankäsittelyn. Lisäksi tutkimme uutta värimallia, HSV:tä, joka toimii värillä eri tavalla kuin RGB ja LAB. Tämä malli helpottaa ominaisuuksien, kuten sävyn, kylläisyyden ja keveyden, manipulointia, mikä tekee siitä erityisen hyödyllisen värin säätämisessä kuvissa.
Koko hankkeen koodi on saatavilla osoitteessaTämä linkkija
Tämä linkkiAdjusting the Number of Colors in the Extracted Palette
Olemme jo nähneet, miten paletin rajoittaminen voi muuttaa kuvan ulkonäköä.
Joustavampia suodattimia ja kuvankäsittelyn säätöjä varten lisäämme mahdollisuuden hallita kuvasta poistettujen värien määrää.Nyt voit asettaa tarkasti, kuinka monta väriä on korostettu kuvassa, mikä mahdollistaa paremman hallinnan visuaalisista tehosteista.Tämä ominaisuus on erityisen hyödyllinen, kun työskentelet palettien kanssa suodattimien luomiseksi, koska värien määrän muuttaminen koskee monenlaisia suunnittelutoimintoja.
Sovelluksessa on nyt liukusäädin, jonka avulla voit valita kuvan poistamien värien määrän (10-20). Tämä säätö vaikuttaa suodattimen tuloksiin ja auttaa saavuttamaan parempia visuaalisia tehosteita.
<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>
Tulemme kokeilemaan hämmästyttävää valokuvaa, jonka on tehnyt So SasakiLähde TokioSiinä on laaja valikoima värejä ja sävyjä, mikä tekee siitä täydellisen kohteen tutkimuksellemme.
Alla voit verrata, miltä kuva näyttää eri kokoisten palettien kanssa.
Filter Intensity Slider
Jotta suodatusprosessi olisi joustavampi, lisäämme liukusäätimen hallitsemaan paletti-sovelluksen voimakkuutta kuvaan.
Valitse vain haluttu suodattimen voimakkuus ja napsauta ”Käytä suodatinta”.
<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?
Kun voimakkuus on asetettu 100 prosenttiin, kuva muuttuu täysin käyttämällä valitun paletin värejä. Mitä pienempi voimakkuusarvo on, sitä pienempi vaikutus paletilla on kuvaan, jolloin voit säilyttää enemmän alkuperäisiä värejä.
HSV Color Model
HSV (Hue, Saturation, Value) on yksi suosituimmista värimalleista, jota käytetään usein värin, kylläisyyden ja kirkkauden osalta.
- on
- Väri: Tämä edustaa ensisijaista väriä (kuten punaista, vihreää, sinistä jne.), mitattuna asteina 0–360. on
- Saatavuus: Tämä osoittaa värin voimakkuuden. Saatavuus vaikuttaa värin harmaan määrään: 100% on täysin kyllästynyt väri ja 0% on harmaa. on
- Arvo (kirkkuus): Tämä osoittaa, kuinka kirkasta väri on. Arvo 0% antaa mustan, kun taas 100% on värin kirkkain versio. on
Differences from RGB and LAB• :
- on
- Toisin kuin RGB, jossa värit yhdistyvät punaisen, vihreän ja sinisen voimakkuuden perusteella, HSV perustuu ihmisen visuaaliseen havaintoon. on
- Verrattuna LAB:hen, joka käyttää monimutkaisempaa matemaattista mallia tarkkojen värien esittämiseen eri valaistusolosuhteissa, HSV on intuitiivisempi ja käyttäjäystävällisempi. on
Esimerkki koodista RGB: n muuntamiseen 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];
}
Alla on esimerkkejä kuvista samassa paletissa, mutta eri väri malleissa.
Contrast Slider
Kontrasti tarkoittaa kuvan valoisimpien ja pimeimpien pisteiden välistä eroa. Kontrastin säätäminen mahdollistaa tämän eron lisäämisen tai pienentämisen.
How does contrast adjustment work?
Kun kontrastia lisätään, kuvan tummat alueet muuttuvat entistä tummemmaksi ja valoisat alueet entistä kirkkaammiksi.Tämä vaikutus voi tehdä kuvan näkyvän kirkkaammaksi ja terävämmäksi, mikä lisää sen visuaalista vaikutusta.
Esimerkki koodista kontrastin muuttamiseksi:
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• :
Kontrastialgoritmi käyttää tekijää, joka riippuu nykyisestä kontrastin arvosta.Tätä tekijää sovelletaan jokaiseen värikomponenttiin (punainen, vihreä ja sininen), säätämällä niiden kirkkautta kontrastin tason perusteella.
Noise Slider
Niille, jotka haluavat pitää hauskaa, olemme lisänneet melun liukusäätimen. Melun lisääminen kuvaan auttaa luomaan vintage-valokuvaefektiä tai tekemään kuvan tuntumaan "elävämmältä".Tätä vaikutusta käytetään piilottamaan epätäydellisyyksiä tai lisäämään taiteellista kosketusta kuvaan.
How does the noise work?
Melu liukusäätimellä voit hallita kuvassa olevan jokaisen pikselin väriin sovellettavien satunnaisten muutosten määrää.Mitä korkeampi melu-arvo on, sitä suurempi on kuvan satunnaisten muutosten määrä.
Kun kuviin lisätään melua, kunkin pikselin RGB-arvoihin lisätään pieniä, satunnaisia vaihteluita, mikä johtaa viljan vaikutukseen.Tämä vaikutus voi olla hienovarainen tai voimakas riippuen käytetyn melun määrästä.Tämä voi auttaa antamaan kuvalle teksturoidumman ilmeen tai simuloimaan vanhan, matalan resoluution valokuvan ulkonäköä.
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• :
Jokaiseen pikseliin lisätään satunnaisarvo määritetyn alueen sisällä. Tämä luo satunnaisten värimuutosten vaikutuksen, mikä antaa kuvalle meluisan tai viljeltävän ulkonäön. Meidän tapauksessamme simuloimme yksinkertaisesti vääristymiä, joilla ei ole mitään tekemistä todellisen elokuvan viljan tai melun kanssa.Näytönohjain: Sony Ericsson W810) toimivat samalla periaatteella.
Hallitsemalla melun määrää käyttäjät voivat kokeilla eri intensiteettiä erilaisten luovien vaikutusten saavuttamiseksi tai kuvata valokuvan epätäydellisyyksiä.
Ja tietenkin olemme lisänneet Reset Settings -painikkeen, joka poistaa kaikki suodattimet ja palaa alkuperäiseen kuvaan.
Olemme tutkineet, miten väripaletteja voidaan poimia ja säätää, kontrastin, kyllästymisen ja melun vaikutuksia sekä miten voidaan työskennellä eri värimalleilla – RGB, LAB ja HSV.
Värikorjaus on ratkaiseva osa kuvankäsittelyä, jonka avulla voimme parantaa visuaalista havaintoa, korostaa tiettyjä elementtejä ja saavuttaa harmoniaa värien välillä.Olemme osoittaneet, miten värien määrän säätäminen paletissa tai kontrastiasetusten muuttaminen voi täysin muuttaa kuvan, mikä tekee siitä ilmeisemmän ja dynaamisemman.
On tärkeää huomata, että värin ja kontrastin säätö ei vaikuta vain kuvan ulkonäköön vaan myös siihen, miten se havaitaan.
