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

Question

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

Answer 1

Вы можете программно получить изображение и проверить размеры, используя 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';

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

Answer 2

clientWidth и clientHeight - это свойства DOM, которые показывают текущий размер в браузере внутренних размеров элемента DOM (исключая поля и границы). Таким образом, в случае элемента IMG будут получены фактические размеры видимого изображения.

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

Answer 3

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

imageElement.naturalHeight

и

imageElement.naturalWidth

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

Answer 4

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

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

Answer 5

Я думаю, что обновление этих ответов полезно, потому что один из ответов с наибольшим количеством голосов предлагает использовать 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

Answer 6

Используя JQuery, вы делаете это:

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

Answer 7

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

Answer 8

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

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

Answer 9

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

Answer 10

хорошо, ребята, я думаю, что я улучшил исходный код, чтобы иметь возможность загружать изображение, прежде чем пытаться выяснить его свойства, иначе оно будет отображать '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']);
}