Bir görüntüyü kırp _

Tarayıcı tabanlı görüntü kırpma nasıl çalışır

Kırpma işlemi tamamen tarayıcı sekmeniz içinde Canvas API kullanılarak çalışır. Sunucu tarafı işleme, yükleme veya üçüncü taraf hizmetler gerekmez. Her adım cihazınızda gerçekleşir.

1. Görüntüyü bir <img> öğesine yükleyin, böylece tarayıcı onu yerel olarak çözer. Bir tuval katmanı, görüntüyü görünüm alanına sığacak şekilde ölçeklendirirken, sürüklenebilir bir seçim dikdörtgeni mevcut kırpma bölgesini gösterir.
2. Dikdörtgeni kenarlarından veya köşelerinden sürükleyerek kırpma alanını ayarlayın. Dikdörtgen, görüntü sınırlarına sabitlenir, böylece resmin dışında bir alan seçemezsiniz. Sabit bir en-boy oranı (1:1, 16:9, 4:3) etkinken, yeniden boyutlandırma bu oranı otomatik olarak korur.
3. Piksel göstergesi siz sürüklerken gerçek zamanlı olarak güncellenir ve görüntü piksel koordinatlarında mevcut kırpma genişliğini, yüksekliğini, X ve Y konumlarını gösterir. Bu, tahmin yapmadan tam boyutları hedeflemenizi sağlar.
4. Kırp ve İndir'e tıkladığınızda, sayfa kaynak görüntünün yalnızca seçilen bölgesini orijinal piksel çözünürlüğünde ekran dışı bir tuvale çizer, ardından sonucu canvas.toBlob() aracılığıyla kaynak dosyayla aynı formatta dışa aktarır. İndirme için bir Blob URL'si oluşturulur.

Neden çevrimiçi görüntü kırpmalısınız?

• Kırpma, istenmeyen kenarları, boş alanları veya görsel karmaşayı ortadan kaldırır. Tek bir kırpma işlemi, genellikle herhangi bir filtre veya renk ayarından daha fazla fotoğraf kompozisyonunu iyileştirir.
• En-boy oranı kontrolü, yayın platformları için çok önemlidir. Sosyal medya akışları profiller için 1:1, video küçük resimleri için 16:9 ve standart fotoğrafçılık için 4:3 bekler. Doğru orana kırpmak, yükleme sırasında garip mektup kutusu görünümünü veya kırpılma sorunlarını önler.
• İstemci tarafı kırpma, fotoğraf düzenleyicisi olmayan kısıtlı kurumsal cihazlarda tek seçenektir. Hiçbir şey yüklenmediği için veri sızıntısı riski yoktur ve hassas görüntüler için uyumluluk incelemesi gerekmez.
• Canlı boyut göstergesi tahmin yapmayı ortadan kaldırır. Sürüklerken piksel koordinatlarını ve seçim boyutunu görürsünüz, böylece bir piksel ölçüm aracına geçmeden tam genişlik ve yüksekliğe kırpabilirsiniz.

Yaygın kırpma uygulamaları

Kırpma, web yayıncılığı, sosyal medya ve yazılım geliştirmede en yaygın görüntü düzenlemelerinden biridir. İşte tarayıcı tabanlı bir kırpıcının zaman kazandırdığı üç senaryo.

• Çevrimiçi mağaza için ürün fotoğrafları hazırlama. Tutarlı bir 1:1 veya 4:5 en-boy oranına kırparak her liste küçük resminin ızgarada hizalanmasını sağlayın. Dışa aktarma orijinal formatı korur, bu nedenle JPEG ürün fotoğrafları JPEG olarak kalır.
• Dokümantasyon veya hata raporları için ekran görüntülerini kırpma. Görüntüyü bir bilete veya çekme isteğine eklemeden önce tarayıcı araç çubuğunu, Windows görev çubuğunu veya hassas bildirimleri kırpın.
• Açılış sayfası için bir hero görüntüsü veya banner çerçeveleme. 16:9 ön ayarını kilitleyin, fotoğrafın en önemli kısmını kırpma dikdörtgeninin ortasına yerleştirin ve retina ekranlarda en iyi kalite için orijinal çözünürlükte dışa aktarın.

Çalışılmış örnek: 4000×3000 fotoğrafı hero banner için 1200×675'e kırpma

Dijital kameradan 4000×3000 piksel bir fotoğraf, tipik bir web hero banner'ı için çok büyüktür. Banner alanı 1200×675 (16:9 çerçeve) olabilir.

Fotoğrafı yükleme bölgesine bırakın. Görüntü tam çözünürlükte yüklenir ancak rahat sürükleme etkileşimi için görünüm alanına sığacak şekilde ölçeklenir. 16:9 en-boy oranı ön ayarını seçin. Kırpma dikdörtgeni anında görüntüye sığan en geniş 16:9 bölgesine oturur. Dikdörtgeni sürükleyerek odak noktasını — bir dağ zirvesi, bir ürün veya bir kişinin yüzü — çerçeveye yerleştirin. Canlı gösterge mevcut seçimi 4000×2250 (tam görüntü 16:9 penceresi) olarak gösterir. Bir köşe tutamağını tutup içe doğru sürükleyerek genişlik göstergesi 1200 px olana kadar ayarlayın. Oran kilitli olduğu için yükseklik otomatik olarak takip eder. Kırp & İndir'e tıklayın. Sayfa, orijinal piksellerden seçilen 1200×675 bölgesini çıkarır ve kırpılmış dosyayı kaynak formatta teslim eder. Tüm işlem bir veya iki saniye sürer ve ilk sayfa yüklemesi dışında hiçbir ağ bant genişliği kullanmaz.

Kırpma için hangi görüntü formatları destekleniyor?

Araç, tarayıcının çözebileceği herhangi bir formatı kabul eder: PNG, JPEG ve WebP, neredeyse tüm gerçek dünya kullanım durumlarını kapsar. Kırpılmış çıktı, kaynak dosyayla aynı formatta kaydedilir. PNG kayıpsız kalır, JPEG orijinal kalite seviyesini korur ve WebP bir WebP olarak kalır. Format, kaynak dosyanın MIME türünden algılanır.

Kırpma görüntü dosyası boyutunu küçültür mü?

Kırpma pikselleri kaldırır, bu nedenle özellikle büyük bir kenarlığı veya boş alanı kırptığınızda çıktının dosya boyutu genellikle kaynaktan daha küçüktür. Dışa aktarma, orijinal dosya formatını ve kodlama parametrelerini kullanır — PNG kayıpsız kalır, JPEG orijinal kalite ayarını korur — bu nedenle tek tasarruf, yeniden sıkıştırmadan değil, azaltılmış piksel sayısından gelir.

En-boy oranı ön ayarları ne işe yarar?

Ön ayarlar (1:1, 16:9, 4:3, 3:2, 9:16), kırpma dikdörtgeninin genişlik-yükseklik oranını kilitler. Bir ön ayar etkinken, herhangi bir köşe veya kenar tutamağını sürüklemek, oranı sabit tutarken seçim boyutunu ayarlar. Serbest moda geçmek kısıtlamayı kaldırır ve dikdörtgeni istediğiniz gibi yeniden boyutlandırmanıza olanak tanır. Oran, görüntü piksel koordinatlarında uygulanır, böylece dışa aktarılan çıktı tam olarak seçtiğiniz en-boy oranına sahip olur.

Görüntü bir sunucuya yükleniyor mu?

Hayır. Görüntü cihazınızdan asla ayrılmaz. Sayfa, görüntüyü belleğe okumak için tarayıcının File API'sini ve kırpma ve dışa aktarma için Canvas API'sini kullanır. Bunu, tarayıcınızın DevTools Ağ panelini açarak doğrulayabilirsiniz — kırpma sırasında giden tek istekler ilk sayfa yüklemesi ve reklam çağrılarıdır. Hiçbir görüntü verisi iletilmez.

Tam piksel koordinatları girerek belirli bir alanı kırpabilir miyim?

Mevcut sürüm, kırpma dikdörtgenini görüntü önizlemesinde sürükleme etkileşimiyle ayarlar. Seçimin X, Y, genişlik ve yükseklik değerleri için canlı piksel koordinatlarını okuyabilirsiniz. Kırpma dikdörtgeni için doğrudan sayısal giriş v1'de mevcut değildir ancak gelecekteki bir güncelleme için planlanmış bir geliştirmedir.

Orijinal görüntüye ne olur?

Orijinal dosya cihazınızda kalır. Sayfa, görüntüyü görüntüleme ve kırpma için tarayıcı belleğine okur ancak diskteki kaynak dosyayı asla değiştirmez. Kırpılmış çıktı, ayrı olarak indirdiğiniz yeni bir dosyadır. Orijinal, bilgisayarınızda veya telefonunuzdaki orijinal konumunda olduğu gibi kalır.

Kırpma için dosya boyutu sınırı var mı?

Araç, düşük özellikli cihazlarda tarayıcı belleğini kontrol altında tutmak için yükleme bölgesinde dosya başına 30 MB sınırı uygular. Görüntünüz 30 MB'dan büyükse, önce özel bir görüntü yeniden boyutlandırma aracı kullanarak küçültebilir, ardından kırpmak için buraya yükleyebilirsiniz.

Kırpma işlemi mobil telefonlarda ve tabletlerde çalışır mı?

Evet. Kırpma tutamaçları dokunma hedefleri göz önünde bulundurularak boyutlandırılmıştır ve etkileşim, hem fare tıklamaları hem de parmak dokunuşlarıyla çalışan işaretçi olaylarını kullanır. Telefon ekranında görüntü önizlemesi mevcut genişliğe uyum sağlar ve kontroller tek elle kolay kullanım için dikey olarak istiflenir.