Bizim üçünƏvvəlki Tutorial, biz proqramlarımızı referanslar və paletlər ilə işləməyə öyrətdik.Şimdi, fin-tuning rəng və vizual efektlər üçün daha çox seçki ekləmək zamanıdır.
Xatırladaq ki, bu barədə “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”in “Qəbələ”in “Qəbələ”nin “Qəbələ”nin “Qəb
Proqramın bütün koduBu linkİŞİD
Bu linkAdjusting the Number of Colors in the Extracted Palette
Artıq gördük ki, bir paletin kəskinləşdirilməsi bir görüntünün görünüşünü dəyişə bilər.
Filtrə və görüntü işləmək üçün daha fleksibil ayarları üçün, görüntüdən çıxartılan rənglərin sayını kontrol etmək üçün imkan ekləyəcəyik.Artıq, görüntüdə nə qədər rəng ortaya çıxaracağına tam şəkildə ayar edə bilərsiniz, bu, vizual efektlər üzərində daha yaxşı kontrol etmək üçün imkan verir.Bu xüsusiyyət filtreyi yaratmaq üçün paletlər ilə işləməkdə özellikle faydalıdır, çünkü rənglərin sayını dəyişmək geniş bir dizayn işi ilə bağlıdır.
App-da artıq görüntüdən çıxartılan rənglərin sayını (10-dən 20-ə qədər) seçmenizi sağlayan bir slider var.Bu düzəltmə filtre rezultatlarını etkiləyir və daha yaxşı vizual efektlər əldə etməyə kömək edir.
<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>
Bu barədə “So Sasaki” adlı fotoşəkili məlumat verib.TOKIO İÇİNO, geniş bir rəng və nüanslara malikdir, bu da bizim araşdırmamız üçün mükəmməl temadır.
Aşağıda görünüşün necə göründüğünü müxtəlif boyutların paletinə bənzəyirsiniz.
Filter Intensity Slider
Filtrasiya prosesini daha fleksibləndirmək üçün, palet uygulamasının intensiyasını kontrol etmək üçün bir slider ekləyəcəyik.Bu slider orijinal görüntü və palet arasındakı balansı ayarlamasını sağlar.
İstədiyiniz filtreyi seçin və “Filtrə daxil olun” (Apply filter) seçin.
<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?
Yuxarıda qeydə alınıb ki, bu, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir.
HSV Color Model
HSV (Hue, Saturation, Value) ən populyar rəng modellərindən biridir, sıklıqla rəngin rəngi, saturasiyası və aydınlığı ilə temsil etmək üçün istifadə edilir.
- Şirkət
- Qara (qara): Bu, 0-dan 360-a qədər ölçülən ilk rəngi (kırmızı, yeşil, mavi və s. kimi) göstərir. Şirkət
- Bu, rəngin intensivliyini göstərir.Saturasiyanın rəngdəki gri miktarı ilə bağlıdır: 100% tam doymuş bir rəngdir, 0% isə gri. Şirkət
- Düşünürəm ki, bu, bir neçə ildir, bir neçə ildir, bir neçə ildir, bir neçə ildir. Şirkət
Differences from RGB and LABŞirkət :
- Şirkət
- RGB-nin rəngləri kırmızı, yeşilli və mavi rənglərin intensivliyi ilə kombinasiyasındakı RGB-dən başqa, HSV insanın vizual hissəsinə dayanır.Bu, rəng düzəltməsi və dizayn işləri kimi işlərə daha intuitivdir. Şirkət
- Daha kompleks matematiki model istifadə edən LAB-a qarşılaşaraq, HSV daha intuitiv və istifadəçi dostudur. Şirkət
RGB-ni HSV-yə dönüştürmək üçün şablon kodu:
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];
}
Aşağıda eyni paletdə, lakin farklı rəngli modellərin görüntüləri var.
Contrast Slider
Kontrast: Görüntüdəki ən aydın və ən qaranlıq yerlər arasındakı fərqdir.Kontrastı dəyişmək bu fərqi artırmaq və ya azaldmaq üçün imkan verir.Kontrast daha böyük olursa, aydın və qaranlıq yerlər daha açıq olacaq.
How does contrast adjustment work?
Kontrast artırıldıqda, görünüşün qaranlıq bölmələri daha da qaranlıqlaşır, aydın bölmələr isə daha da parlaqlaşır.
Kontrast dəyişdirmək üçün kodun örneği:
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Şirkət :
Kontrast algoritması aktualdır.Bu faktor hər bir rəng komponentinə (kırmızı, yeşil və mavi) uygulanır, kontrast düyməsinə görə parlaqlıqlarını dəyişir.
Noise Slider
Xatırladaq ki, bu, bir neçə ildir ki, bir neçə ildir ki, bu, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir neçə ildir ki, bir
How does the noise work?
Xüsusiyyət dəyişdiricisi: Görüntüdəki hər bir pikselin rənginə uygulanan random variantların sayını kontrol edə bilərsiniz. gürültü qiymətinin daha böyük olması, görüntüdəki random dəyişikliklərin sayı daha böyük olur.
Görüntülərə gürcü daxil olduğunda, hər bir pikselin RGB qiymətlərinə kiçik, random variantlar daxil edilir və bu, daha textual görüntü verə bilər, ya da düşük çözünürlüklü bir foto görünüşünü simüle edər.
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Şirkət :
Hər bir pixel üçün müəyyən bir rütbədə random bir qiymət eklənir. Bu, görüntünün gürcü və ya qırmızı görünüşü verərək random rütbənin dəyişdirilməsinin effektini yaratır. Bizim vəziyyətimizdə, biz ancaq real film qırmızı və ya gürcü ilə heç bir əlaqəsi olmayan distorsiyaları simullaşdırırıq.Sony Ericsson W810-ə görəAynı prinsipi ilə işləyirdim.
Sürücülərin gürültüyü kontrol etməklə, istifadəçilər bir fotoqrafta çeşitli yaratıcı efektlər əldə etmək və ya imperfektləri simül etmək üçün müxtəlif intensitetlər ilə eksperiment edə bilərlər.
Bütün filtrləri silmək və orijinal görüntülərə qaytarmaq üçün Reset Settings düyməsini eklədik.
Xatırladaq ki, bu problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini, problemin həllini.
Görüntü işlətməsinin əsas aspektidir ki, görüntü işləməyi artırmaq, belirli elementləri göstərmək və rənglər arasındakı harmoniyadan istifadə etmək mümkündür.Biz paletdəki rənglərin sayını düzəltmək və ya kontrast ayarlarını dəyişmək, görüntüyi daha expressiv və dinamik etmək üçün tamamilə transformasiya edə biləcəyini göstərir.
Rəng və kontrast ayarlarının yalnız görünüşünü dəyişdirməsi deyil, aynı zamanda görünüşünün necə hiss ediləcəyini də etkiləyir.Bu, rəng düzəltməyi yalnız bir teknik proses deyil, həm də bir sanatsal formadır.
