Görsel / Fotoğraf atölyesi

Öncesi ve Sonrası Kaydırıcısı

Düzenlenebilir etiketler ve canlı kaydırıcıyla öncesi ve sonrası karşılaştırması oluşturun. Her iki görseli içeren taşınabilir bir HTML dosyası, animasyonlu GIF geçişi veya desteklenen tarayıcılarda WebM indirin.

Öncesi ve Sonrası Kaydırıcısı: Öncesi görselinin oranlarını kullanır ve sonrası görselini sığacak şekilde merkezden kırpar. HTML indirmesi, her iki PNG görselini veri URI'leri olarak ve klavyeyle erişilebilen kendi aralık kaydırıcısı kodunu içerir. GIF geçişleri 480 × 480 piksel içine sığar; WebM geçişleri, tarayıcı kaydı kullanılabiliyorsa yaklaşık iki saniye boyunca kaydedilir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
Önce ve Sonra kaydırıcısıYerel işleme

Tamamen tarayıcınızda çalışır

Sonraki raster dışa aktarmaya uygulanır.
Önce fotoğrafını seçin

Tıklayın, sürükleyip bırakın veya yapıştırın · bu cihazda kalır

Sonra fotoğrafını seçin

Tıklayın, sürükleyip bırakın veya yapıştırın · bu cihazda kalır

Önce fotoğrafı oranları belirler; sonra fotoğrafı sığacak şekilde merkezden kırpılır. Sabit ve HTML görselleri 1200 × 1200 piksel içine sığar. GIF geçişleri 480 × 480 piksel içine sığar.

HTML dışa aktarımları görselleri ve kaydırıcı kodunu tek dosyada içerir. Kaydırıcıyı sürüklemek veya ok tuşlarını kullanmak için dosyayı bir tarayıcıda açın.

Canlı karşılaştırma

Karşılaştırmak için iki fotoğrafı da seçin.

WebM kaydı bu tarayıcıda kullanılamıyor. Bunun yerine GIF geçişini indirin.

Taşınabilir karşılaştırma

Her iki görsel de aynı oranlara normalize edilir ve PNG veri URI'leri olarak HTML içine gömülür. Yerel aralık girdisi, görünen sonraki görsel alanını kontrol eder ve klavye oklarını destekler. Dosya, katı barındırma politikalarının engelleyebileceği satır içi JavaScript içerir.

Animasyonlu dışa aktarmalar

Kayıttan önce WebM kullanılabilirliği kontrol edilir. WebM veya canvas yakalama kullanılamadığında yedek olarak GIF kullanılır. MediaRecorder destek kontrolü: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

Nasıl kullanılır?

  1. Öncesi ve sonrası fotoğraflarını seçin.
  2. Etiketler ekleyin ve karşılaştırma kaydırıcısını hareket ettirin.
  3. Etkileşimli kaydırıcı için HTML'yi, animasyonlu geçiş için GIF'yi veya desteklenen WebM'yi indirin.

Gizlilik ve sınırlamalar

Girdileriniz ve görselleriniz tarayıcınızda kalır. Hiçbir şey yüklenmez.

İlgili araçlar

Sık sorulan sorular

HTML çevrimdışı çalışır mı?

Evet. Her iki görseli ve kaydırıcı kodunu dış istek olmadan tek dosyada içerir.

WebM neden devre dışı?

Tarayıcının WebM kaydını ve canvas yakalamayı desteklemesi gerekir. Bunlar kullanılamadığında GIF geçişini kullanın.

Bu araç görsel karşılaştırma kaydırıcısından nasıl farklıdır?

Bu sayfa çalışan bir HTML kaydırıcısı ve animasyonlu geçişler oluşturur. Görsel karşılaştırma kaydırıcısı, yan yana düzenler de dâhil olmak üzere statik bir PNG oluşturur.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez