Görüntü Farkı Denetleyicisi

Bir CSS ayarlaması gönderdiniz ve tam olarak neyin taşındığını bilmek mi istiyorsunuz? QA görsel regresyon kontrolü için iki ekran görüntüsünü karşılaştırıyor musunuz? Aynı fotoğrafın dışa aktarılan iki versiyonu arasında gerçekte neyin değiştiğini merak mı ediyorsunuz? İki görüntü arasında ileri geri kaydırma yapmak ve farklılıkları bulmak için gözlerinizi kısarak bakmak yavaştır ve güvenilmezdir; bu araç, ikisinin üzerine biner ve değişen her pikseli tek bir görüntüde gösterir.

Karşılaştırma, piksel eşleştirme gibi araçlar tarafından kullanılan aynı algoritma ailesi olan gerçek piksel farklılaştırma matematiğidir: her iki görüntünün her pikseli RGB'den YIQ renk uzayına dönüştürülür (Y = luma, I ve Q = NTSC renklilik eksenleri) ve iki YIQ noktası arasındaki Öklid mesafesi hesaplanır. Bu mesafe, hassasiyet kaydırıcısı tarafından belirlenen bir eşikle karşılaştırılır; hafif renk değişimlerini yakalamak için hassasiyeti artırın, sıkıştırma gürültüsünü göz ardı etmek ve yalnızca belirgin değişiklikleri önemsemek için azaltın.

Piksel başına naif bir karşılaştırma, anlamlı hiçbir şey değişmese bile kenar yumuşatılmış her kenarı "farklı" olarak aydınlatacaktır, çünkü yumuşatma bir avuç kenar pikselini birkaç ton kaydırır. Bu araç, her iki görüntü üzerinde de gerçek bir kenar yumuşatma buluşsal yöntemi çalıştırır: bir piksel yalnızca yumuşatıcı bir degradenin içinde yer almıyorsa gerçek bir fark olarak değerlendirilir; somut olarak, her iki kaynak görüntüdeki kendi 3x3 komşuluğu, gerçek içerikten ziyade AA ile yumuşatılmış bir kenarın parmak izi olan, kendisinden hem daha açık hem de daha koyu bir piksel içermiyorsa.

Resim A ve Resim B'yi yükleyin, gerekirse hassasiyeti ayarlayın ve Çalıştır'a basın. Orijinalin soluk versiyonu üzerinde, farklı piksellerin tam yüzdesine ve her gerçek değişikliğin parlak macenta rengiyle vurgulandığı farklı bir görüntüye sahip olursunuz; bunu indirin ve doğrudan hata raporunuza veya QA notlarınıza ekleyin. Her iki görüntü de aynı boyutları paylaşmalıdır; eğer yapmazlarsa, araç bunlardan birini sessizce kırpmak veya uzatmak yerine size açıkça söyler. Hiçbir şey tarayıcınızdan hiçbir zaman ayrılmaz.