JavaScript kullanarak görüntü boyutu (yükseklik ve genişlik) nasıl alınır?

Sayfadaki bir görüntünün boyutlarını almak için JavaScript veya jQuery API'ları veya yöntemleri var mı?

Javascript kullanarak görüntüyü programlı olarak alabilir ve boyutları kontrol edebilirsiniz ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Görüntü işaretlemenin bir parçası değilse bu yararlı olabilir.

clientWidth ve clientHeight , bir DOM öğesinin iç boyutlarının geçerli tarayıcı içi boyutunu gösteren kenar boşluklarıdır (kenar boşluğu ve kenarlık hariç). Dolayısıyla, bir IMG öğesi söz konusu olduğunda, bu, görünür görüntünün gerçek boyutlarını elde edecektir.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Ayrıca (Rex ve Ian'ın cevaplarına ek olarak):

imageElement.naturalHeight

ve

imageElement.naturalWidth

Bunlar, görüntü dosyasının kendisinin yüksekliğini ve genişliğini sağlar (yalnızca görüntü öğesi yerine).

JQuery kullanıyorsanız ve görüntü boyutları istiyorsanız, yüklenene kadar beklemeniz gerekir, yoksa yalnızca sıfır alırsınız.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Bence bu cevaplar için bir güncelleme yararlı çünkü en iyi oylanan cevaplardan clientWidthbiri şimdi ve bence eski ve clientHeight önermektedir .

Hangi değerlerin gerçekten döndürüldüğünü görmek için HTML5 ile bazı deneyler yaptım.

Her şeyden önce, görüntü API'sine genel bir bakış için Dash adlı bir program kullandım. Bu belirtmektedir heightve widthgörüntünün ve verilen yükseklik / genişlik vardır naturalHeightve naturalWidthgörüntünün iç yükseklik / genişlik (ve yalnızca HTML5'i vardır).

Yüksekliği 300 ve genişliği 400 olan bir dosyadan güzel bir kelebeğin görüntüsünü kullandım. Ve bu Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Sonra bu HTML'yi yükseklik ve genişlik için satır içi CSS ile kullandım.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Sonuçlar:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Daha sonra HTML'yi şu şekilde değiştirdim:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

ör. satır içi stiller yerine yükseklik ve genişlik niteliklerini kullanma

Sonuçlar:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Daha sonra HTML'yi şu şekilde değiştirdim:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

yani hangisinin öncelikli olduğunu görmek için hem öznitelikleri hem de CSS'yi kullanmak.

Sonuçlar:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

JQuery kullanarak şunları yapabilirsiniz:

var imgWidth = $("#imgIDWhatever").width();

Diğerlerinin unuttuğu şey, yüklenmeden önce görüntü boyutunu kontrol edememenizdir. Yazar gönderilen tüm yöntemleri kontrol ettiğinde, muhtemelen sadece localhost üzerinde çalışacaktır. JQuery burada kullanılabileceğinden, görüntüler yüklenmeden önce 'hazır' etkinliğinin tetiklendiğini unutmayın. $ ('# xxx'). width () ve .height (), onload olayında veya sonrasında başlatılmalıdır.

Görüntüyü gerçekten yüklemeyi tamamlayana kadar bilinmediği için bunu yalnızca load olayının geri aramasını kullanarak gerçekten yapabilirsiniz. Aşağıdaki kod gibi bir şey ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

İle jQuery kütüphane

Kullanım .width()ve .height().

Daha fazlası JQuery genişliği ve jQuery heigth .

Örnek Kod

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

Tamam çocuklar, ben özelliklerini bulmaya çalışmadan önce görüntü yük izin verebilmek için kaynak kodunu geliştirdi düşünüyorum, aksi takdirde '0 * 0' görüntüler, çünkü dosyaya yüklenmeden önce sonraki ifade çağrı olurdu tarayıcı. Jquery gerektirir ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

Varsayalım ki, <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Doğal Boyutlar

el.naturalWidthve el.naturalHeightbize doğal boyutları kazandıracak , resim dosyasının boyutları.

Yerleşim Boyutları

el.offsetWidthve el.offsetHeightbize eleman belge üzerinde işlenen edildiği boyutlarını alacak.

Gerçek görüntü boyutunu kullanmadan önce kaynak görüntü yüklemelisiniz. JQuery çerçevesini kullanırsanız, gerçek görüntü boyutunu basit bir şekilde elde edebilirsiniz.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

Bu cevap tam olarak aradığım şeydi (jQuery'de):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

Eğer vaatimageDimensions() kullanmaktan korkmazsanız aşağıdaki ( ) gibi basit bir işleve sahip olabilirsiniz .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

JQuery Cevap:

$height = $('#image_id').height();
$width  = $('#image_id').width();

Bunun 2019'da Javascript ve / veya Dizgi kullanan bazı kişiler için yararlı olabileceğini düşündüm.

Bazılarının önerdiği gibi, yanlış olduğunu gördüm:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Doğru:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Sonuç:

İşlevde imgdeğil this, kullanın onload.

Son zamanlarda esnek kaydırıcıda bir hata için aynı sorunu vardı. İlk görüntünün yüksekliği, yükleme gecikmesi nedeniyle daha küçük ayarlandı. Bu sorunu çözmek için aşağıdaki yöntemi denedim ve işe yaradı.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

Bu size orijinal genişlik veya Sıfır yerine belirlediğiniz genişliğe göre yükseklik verecektir.

Ayrıca kullanabilirsiniz:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Nicky De Maeyer arka plan resminden sonra sordu; Ben sadece css almak ve "url ()" değiştirin:

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Sayfa js veya jquery'ye şu şekilde yüklendiğinde onload handler özelliğini uygulayabilirsiniz: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

Basitçe, böyle test edebilirsiniz.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

tarayıcı tarafından yorumlanan ayarın ana div'den kaldırılması önemlidir. Gerçek görüntü genişliğini ve yüksekliğini istiyorsanız sadece

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Bu, doğru ilişkiyle ölçeklendirmek için görüntünün gerçek özelliklerine ihtiyaç duyduğum bir TYPO3 Projesi örneğidir.

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Bu benim yöntemim, umarım bu yardımcı olur. :)

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

birden fazla görüntü önizleme ve yükleme için bu çalışma. görüntülerin her biri için birer birer seçmeniz gerekiyorsa. Sonra kopyalayın ve tüm önizleme görüntü fonksiyonu geçmiş ve doğrulamak !!!

Öğenin niteliklerini edinmeden önce belge sayfası yüklenmelidir:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

Doğru dosyayı seçtiğimizde giriş elemanı tarafından elde edilen img dosya nesnesini geçerek görüntünün netural yüksekliğini ve genişliğini verecektir

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}