İki görseli yan yana fark vurgulama ve kaydırıcı karşılaştırması ile karşılaştırın. Kalite karşılaştırması ve önce/sonra efekt karşılaştırması için mükemmel.
Features
- Çoklu Karşılaştırma Modları: Farklı karşılaştırma ihtiyaçlarını karşılamak için yan yana ve kaydırıcı karşılaştırma modlarını destekler
- Fark Vurgulama Görüntüleme: İki görsel arasındaki fark alanlarını otomatik olarak tespit edip vurgular, fark konumlarını sezgisel olarak gösterir
- Etkileşimli Kaydırıcı: Kaydırıcı karşılaştırma modunda, farklı alanları görmek için kaydırıcıyı sürükleyin, hassas detay karşılaştırması için
- Hassas Piksel Tespiti: Görsel farkları hassas bir şekilde tespit etmek için piksel düzeyinde karşılaştırma algoritması kullanır, özel fark eşiğini destekler
Usage Guide
- Adım 1: Karşılaştırmak için iki görsel yükleyin.
- Adım 2: Karşılaştırma modunu seçin (yan yana veya kaydırıcı) ve fark vurgulamasını etkinleştirin (isteğe bağlı).
- Adım 3: Karşılaştırma sonuçlarını görüntüleyin, en iyi karşılaştırma efekti için kaydırıcı konumunu veya fark eşiğini ayarlayın.
Technical Details
Görsel Karşılaştırma Prensibi
Görsel karşılaştırma, iki görsel arasındaki farkları piksel düzeyinde tespit eder. Yan yana karşılaştırma: sezgisel karşılaştırma için iki görseli yan yana görüntüleme; kaydırıcı karşılaştırması: görüntüleme alanını kontrol etmek için kaydırıcı kullanma, farklı bölümleri görmek için sola/sağa sürükleme; fark vurgulama: iki görsel arasındaki piksel farklarını hesaplama, fark alanlarını kırmızı ile vurgulama. Piksel verilerini almak için Canvas API'nin getImageData() kullanır, RGB değerlerini piksel piksel karşılaştırır, farkı hesaplar ve görselleştirir.
Piksel Fark Tespiti
Uygulama: iki görseli Canvas'a yükle → getImageData() ile piksel verilerini al → RGB değerlerini piksel piksel karşılaştır → farkı hesapla (|R1-R2|+|G1-G2|+|B1-B2|) → eşiği aşarsa fark olarak işaretle → fark görseli oluştur (fark alanları için kırmızı vurgulama). Destekler: özel fark eşiği, gerçek zamanlı önizleme, kaydırıcı etkileşimi, yan yana görüntüleme vb.
Yaratıcı ve Pratik Senaryolar
Görsel karşılaştırma şu amaçlarla kullanılır: tasarım incelemesi (tasarım mockup'ı ve uygulamasını karşılaştırma), kalite kontrolü (orijinal ve sıkıştırılmış görselleri karşılaştırma), önce/sonra karşılaştırması (işleme öncesi ve sonrası efektleri karşılaştırma), sürüm karşılaştırması (farklı sürümlerdeki görselleri karşılaştırma), test doğrulaması (beklenen ve gerçek sonuçları karşılaştırma), öğrenme araştırması (farklı parametrelerin efektlerini karşılaştırma). Görsel farkları hızlıca keşfetmeye ve kalite değerlendirmesi yapmaya yardımcı olur, görsel işleme için pratik bir araçtır.
Frequently Asked Questions
- Hangi karşılaştırma modları mevcut?
- Araç iki karşılaştırma modu sağlar: yan yana (genel karşılaştırma için iki görseli yan yana görüntüleme) ve kaydırıcı (görüntüleme alanını kontrol etmek için kaydırıcı kullanma, farklı bölümleri görmek için sürükleme). Kaydırıcı modu, hassas detay karşılaştırması gerektiren senaryolar için uygundur.
- Fark vurgulama nasıl çalışır?
- Fark vurgulama, iki görseli piksel düzeyinde karşılaştırır ve her piksel için RGB fark değerini hesaplar. Fark, ayarlanan eşiği aştığında, o alan kırmızı ile vurgulanır. Vurgulama hassasiyetini kontrol etmek için fark eşiğini ayarlayabilirsiniz.
- Farklı boyutlardaki görselleri karşılaştırabilir miyim?
- Evet, araç farklı boyutlardaki görselleri otomatik olarak işler. Fark tespiti için, daha büyük görselin boyutunu referans olarak kullanır, daha küçük görseller orantılı olarak görüntülenir.
- Kaydırıcı karşılaştırmasını nasıl kullanırım?
- Kaydırıcı karşılaştırma modunda, görüntüleme alanını kontrol etmek için ortadaki kaydırıcıyı sürükleyin. Kaydırıcının sol tarafı ilk görseli gösterir, sağ taraf ikinci görseli gösterir. Farklı alanların detaylarını hassas bir şekilde karşılaştırmak için kaydırıcıyı sürükleyin.
- Fark eşiğini nasıl ayarlarım?
- Fark eşiği, fark tespitinin hassasiyetini kontrol eder. Daha düşük eşik ince farkları daha kolay tespit eder; daha yüksek eşik yalnızca belirgin farkları gösterir. Gerçek ihtiyaçlara göre ayarlanması önerilir, genellikle 20-50 arasında ayarlanır.
Related Documentation
- MDN - Canvas API - Görsel manipülasyon ve işleme için HTML5 Canvas API
- MDN - ImageData API - Canvas ImageData arayüz dokümantasyonu
- Web.dev - Görsel Optimizasyonu - Web'de görselleri optimize etmek için en iyi uygulamalar