Görselin orjinal genişlik ve yüksekliği nasıl bulunur.

Eğer resim veya fotoğrafın orjinal genişlik ve yükseklik değerlerini bulmak için JQuery ile width() veya height() gibi fonksiyonları kullanıyorsanız, cevap olarak tarayıcıda önizlediğiniz boyutları alacaksınızdır. Ama istediğim şey gördüğüm boyut değil, görselin doğal boyutları. Resmin orjinal genişlik ve yüksekliğini bulmak ve almak aslında basit. Javascript’in içinde bulunan iki özellik ile yapabiliriz. Hemen bakalım.

naturalWidth ve naturalHeight kullanımı

naturalWidth ve naturalHeight bu işi çözecek çok güzel iki tane JS özelliğimiz. GÖrselimizi tanımladıktan sonra, bu özelliklere giriyoruz.

Bu özellikleri Internet explorer 8 ve eski versiyonları hariç tüm tarayıcılar destekler.

var image = document.getElementById('resmim');
var genislik = image.naturalWidth;
var yukseklik = image.naturalHeight;

Resim Nesnesi Kullanımı

Tabiki tüm tarayıcılara destek verilmesi gerektiği için burada resim nesnesi oluşturup JS içine çağırıp gerçek yükseklik ve genişliğini buluyoruz.

var resim = new Image(); // or document.createElement('img')
var genislik, yukseklik;
resim.onload = function() {
genislik = this.width;
yukseklik = this.height;
};
resim.src = 'http://erenkorkmaz.com.tr/wp-content/uploads/2016/07/test-resmi-eren-korkmaz.jpg';

Son Hali

İkisini de birleştirip güzel bir sonuç elde ediyoruz. Yani natural width ve height desteklemeyen tarayıcılar için bir şart koyduk.