Birden fazla görseli yatay, dikey veya ızgara düzenlerle tek bir görsele birleştirin. Görsel kompozisyon ve uzun görsel oluşturma için mükemmel.
Features
- Çoklu Düzen Modları: Farklı birleştirme ihtiyaçlarını karşılamak için yatay, dikey ve ızgara düzen modlarını destekler
- Esnek Özelleştirme: Görsel boşluğu ve arka plan rengini ayarlayın, birleştirme sonuçları üzerinde tam kontrol için özel ızgara satır/sütunlarını destekler
- Gerçek Zamanlı Önizleme: Görselleri yükledikten hemen sonra birleştirme önizlemesini gösterin, gerçek zamanlı güncellemeler için parametreleri ayarlayın
- Yüksek Kaliteli Çıktı: Piksel düzeyinde işleme için Canvas API kullanır, orijinal görsel kalitesini korur, PNG format çıktısını destekler
Usage Guide
- Adım 1: Birleştirmek için görselleri yükleyin (çoklu seçimi destekler).
- Adım 2: Düzen modunu seçin (yatay, dikey veya ızgara) ve parametreleri ayarlayın.
- Adım 3: Birleştirme sonucunu önizleyin ve memnun olduğunuzda indirin.
Technical Details
Görsel Birleştirme Prensibi
Görsel birleştirme, birden fazla görseli belirtilen bir düzene göre tek bir görsele birleştirir. Yatay birleştirme: toplam genişlik (tüm görsel genişliklerinin toplamı + boşluk) ve maksimum yükseklik hesaplama; dikey birleştirme: maksimum genişlik ve toplam yükseklik (tüm görsel yüksekliklerinin toplamı + boşluk) hesaplama; ızgara birleştirme: satır ve sütunlara göre düzenleme, ızgara boyutlarını hesaplama. Her görseli hedef konuma çizmek için Canvas API'nin drawImage() yöntemini kullanır, özel boşluk ve arka plan rengini destekler.
Canvas Görsel Kompozisyonu
Uygulama: Canvas oluştur → boyutları ayarla (düzene göre hesaplanmış) → arka plan rengini doldur → her görseli belirtilen konuma çizmek için döngü → toDataURL() ile dışa aktar. Yatay: x koordinatını biriktir; dikey: y koordinatını biriktir; ızgara: satır/sütun indeksine göre x, y hesapla. Destekler: özel boşluk, arka plan rengi, görsel hizalama, kalite ayarları vb.
Yaratıcı ve Pratik Senaryolar
Görsel birleştirme şu amaçlarla kullanılır: uzun görsel oluşturma (birden fazla ekran görüntüsünün dikey birleştirmesi), karşılaştırma görüntüleme (yatay yan yana karşılaştırma), bulmaca yapma (ızgara düzeni), sosyal medya (çoklu görsel kompozisyonu), tasarım düzeni (görsel kombinasyonu), belge organizasyonu (çok sayfalı ekran görüntülerini birleştirme). Görselleri hızlıca oluşturmaya ve görsel efektler yaratmaya yardımcı olur, görsel işleme için pratik bir araçtır.
Frequently Asked Questions
- Hangi düzen modları destekleniyor?
- Araç üç düzen modu sağlar: yatay birleştirme (görseller soldan sağa düzenlenmiş), dikey birleştirme (görseller yukarıdan aşağıya düzenlenmiş) ve ızgara birleştirme (satır×sütun ızgarasında düzenlenmiş). Yatay birleştirme karşılaştırma görselleri için uygundur, dikey birleştirme uzun görseller için, ızgara birleştirme ise bulmaca efektleri için uygundur.
- Uzun bir görsel nasıl oluşturulur?
- Dikey birleştirme modunu seçin, birleştirmek için görselleri yükleyin ve araç görselleri otomatik olarak yukarıdan aşağıya düzenleyecektir. Görsel boşluğu ve arka plan rengini ayarlayabilir, ardından önizlemeden memnun olduğunuzda indirebilirsiniz.
- Birleştirme görsel kalitesini düşürür mü?
- Hayır, araç piksel düzeyinde işleme için Canvas API kullanır, orijinal görsel kalitesini korur. Çıktı formatı PNG'dir ve yüksek kaliteli çıktı sağlar.
- Aynı anda kaç görsel birleştirilebilir?
- Teorik olarak sınırsızdır, ancak tarayıcı belleği ve performansına göre makul kullanılması önerilir. İşleme hızı ve kararlılığı sağlamak için aynı anda 20'den fazla görsel birleştirilmesi önerilmez.
- Görsel boşluğunu ayarlayabilir miyim?
- Evet, araç özel boşluk ayarlarını (0-100px) destekler, daha güzel bir birleştirme sonucu için görseller arasındaki boş alanı ayarlamanıza olanak tanır.
Related Documentation
- MDN - Canvas API - Görsel manipülasyon ve işleme için HTML5 Canvas API
- MDN - File API - Web uygulamalarında dosyalar ve blob'larla çalışma
- Web.dev - Görsel Optimizasyonu - Web'de görselleri optimize etmek için en iyi uygulamalar