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

Вы можете программно получить изображение и проверить размеры с помощью Javascript...

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

Это может быть полезно, если изображение не является частью разметки.

Также (в дополнение к ответам Rex и Ian) есть:

imageElement.naturalHeight

и

imageElement.naturalWidth

Они обеспечивают высоту и ширину самого файла изображения (а не только элемента изображения).

Если вы используете jQuery и запрашиваете размеры изображений, вам нужно подождать, пока они загрузятся, или вы получите только нули.

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

Я думаю, что обновление этих ответов полезно, потому что один из наиболее проголосовавших ответов предлагает использовать clientWidth и clientHeight, которые, я думаю, теперь устарели.

Я провел несколько экспериментов с HTML5, чтобы увидеть, какие значения действительно возвращаются.

Прежде всего, я использовал программу под названием Dash, чтобы получить обзор API изображений. В нем указано, что height и width - это высота/ширина изображения, а naturalHeight и naturalWidth - внутренняя высота/ширина изображения (и только HTML5).

Я использовал изображение красивой бабочки, из файла с высотой 300 и шириной 400. И этот Javascript:

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

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

Затем я использовал этот HTML-код с встроенным CSS для высоты и ширины.

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

Результаты:

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

/*Actual Rendered size*/    120                  150

Затем я изменил HTML на следующее:

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

то есть. используя атрибуты высоты и ширины, а не встроенные стили.

Результаты:

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

/*Actual Rendered size*/     90                  115

Затем я изменил HTML на следующее:

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

то есть. используя оба атрибута и CSS, чтобы увидеть, какой из них имеет приоритет.

Результаты:

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

/*Actual Rendered size*/    120                  150

Используя JQuery, вы выполните следующее:

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

Все, что забыли, это то, что вы не можете проверить размер изображения до его загрузки. Когда автор проверяет все опубликованные методы, он будет работать, вероятно, только на localhost. Поскольку jQuery можно использовать здесь, помните, что перед загрузкой изображений запускается событие "ready". $('# xxx'). width() и .height() должны быть запущены в событии onload или позже.

Вы действительно можете сделать это только с помощью обратного вызова события загрузки, поскольку размер изображения неизвестен до тех пор, пока он не закончит загрузку. Что-то вроде кода ниже...

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

С jQuery библиотека -

Используйте .width() и .height().

Подробнее в jQuery width и jQuery heigth.

Пример кода -

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

ОК, я думаю, что я улучшил исходный код, чтобы позволить загрузке изображения, прежде чем пытаться выяснить его свойства, иначе он отобразит "0 * 0", потому что следующий оператор вызывается перед файлом был загружен в браузер. Требуется jquery...

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']);
}

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

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

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

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

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

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

Ответ JQuery:

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

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.

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

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

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

 });

Недавно у меня была такая же проблема с ошибкой в ​​слайдере 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';

Это даст вам высоту относительно установленной ширины, а не оригинальной ширины или нуля.

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

Ники Де Маейер спросил после фоновой картины; Я просто получаю его из 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()));
}

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

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

Прежде чем приобретать атрибуты элемента, страница документа должна быть загружена:

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

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

эта работа для предварительного просмотра и загрузки изображений. если вам нужно выбирать для каждого из изображений по одному. Затем скопируйте и зайдите во все функции предварительного просмотра и подтвердите свой выбор.

важно удалить интерпретируемый браузер параметр из родительского div. Поэтому, если вам нужна реальная ширина и высота изображения, вы можете просто использовать

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

Это один пример проекта TYPO3 Project от меня, где мне нужны реальные свойства изображения, чтобы масштабировать его с правильным соотношением.