Görsel Filtre Stüdyosu
Parlaklık, kontrast, sepya ve bulanıklığı canlı uygulayın, CSS filtresini kopyalayın.
Görsel Filtre Stüdyosu hakkında
Canvas 2D ile CSS aynı filtre motorunu kullanır: ctx.filter değerini grayscale(100%) yaptığınızda 0.2126R + 0.7152G + 0.0722B parlaklık matrisi çalışır ve saf kırmızı #FF0000 orta gri yerine rgb(54,54,54) olur. Sıra da önemlidir: blur(4px) saturate(200%) ile saturate(200%) blur(4px) aynı görüntüyü vermez. Bu araç sekiz filtreyi sabit ve belgelenmiş bir sırayla uygular ve kullandığı dizeyi aynen yazar.
Görsel Filtre Stüdyosu nasıl kullanılır
- 1
Görseli kutuya sürükleyin veya tıklayıp seçin; acele ediyorsanız varsayılan olarak yüklenen 600×400 renk kartı da yeterlidir.
- 2
Noir, Eski, Canlı, Soluk, Rüya, Negatif veya Neon hazır ayarlarından birine basarak bir başlangıç noktası alın.
- 3
Sekiz kaydırıcıyı ayarlayın: parlaklık, kontrast, doygunluk, gri ton, sepya, renk döndürme, ters çevirme ve bulanıklık.
- 4
Karşılaştır düğmesiyle tuvali filtreli sonuç ile dokunulmamış orijinal arasında değiştirin.
- 5
Filtre dizesini stil dosyanıza kopyalayın veya sonucu görselin kendi piksel boyutunda PNG olarak indirin.
Sıkça sorulan sorular
Gri tonlama üç kanalın ortalaması mıdır?
Hayır, ve en sık yapılan yanlış budur. grayscale parlaklık matrisini kullanır: 0.2126 kırmızı + 0.7152 yeşil + 0.0722 mavi. Bu yüzden saf kırmızı rgb(54,54,54), saf yeşil ise rgb(182,182,182) olur; basit ortalama ikisini de 85 yapardı. Örnek renk kartını yükleyip gri ton kaydırıcısını 100 yaparak kendiniz görebilirsiniz.
CSS dizesi önizlemede gördüğüm sonucun aynısını verir mi?
Renk fonksiyonları için evet: brightness, contrast, saturate, grayscale, sepia, hue-rotate ve invert çözünürlükten bağımsızdır ve aynı piksel değerlerini üretir. Ancak blur piksel cinsindendir ve öğenin ekranda kaç piksel genişlikte çizildiğine bağlıdır; yarı boyutta gösterilen bir görselde blur(5px) daha güçlü görünür.
Görselim bir yere yükleniyor mu, boyut sınırı var mı?
Hiçbir dosya gönderilmez; dosyayı okuma, tuvale çizme ve PNG üretme işlemlerinin tamamı tarayıcınızda olur, sayfa tek bir ağ isteği bile yapmaz. Tek gerçek sınır şudur: uzun kenarı 2400 pikselden büyük görseller canlı önizleme akıcı kalsın diye küçültülür, dolayısıyla indirilen PNG de en fazla 2400 piksel olur.
Bulanıklık verince kenarlar neden saydamlaşıyor?
Çünkü blur her pikseli komşularıyla ortalar ve tuvalin kenarının ötesinde saydamlıktan başka bir şey yoktur. Bu, filtrenin standart davranışıdır, aracın hatası değildir. Temiz kenar isterseniz indirdikten sonra her kenardan birkaç piksel kırpın veya daha düşük bir bulanıklık yarıçapı kullanın.