Как получить размер изображения (высота и ширина) с помощью JavaScript?

Question

Существуют ли какие-либо jQuery или чистые JS API или методы для получения размеров изображения на странице?

Answer 1

Перед использованием реального размера изображения вы должны загрузить исходное изображение. Если вы используете JQuery Framework, вы можете получить реальный размер изображения простым способом.

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

Answer 2

Этот ответ был именно тем, что я искал (в jQuery):

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

Answer 3

JQuery Ответ:

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

Answer 4

Просто, вы можете проверить, как это.

  <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>

Answer 5

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.

Это мой метод, надеюсь, это поможет. :)

Answer 6

Вы можете применить свойство обработчика загрузки, когда страница загружается в js или jquery следующим образом: -

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

 });

Answer 7

Недавно у меня возникла та же проблема с ошибкой в ​​ползунке flex. Высота первого изображения была установлена ​​меньше из-за задержки загрузки. Я попытался следующий метод для решения этой проблемы, и это сработало.

// 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';

Это даст вам высоту относительно ширины, которую вы установили, а не исходную ширину или ноль.

Answer 8

спросил Ники Де Майер после фоновой картинки; Я просто получаю его из CSS и заменяю "url ()":

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()));
}

Answer 9

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 ...

Answer 10

Вы также можете использовать:

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