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

565
задан Karol Selak 6 November 2017 в 14:15
поделиться

8 ответов

Можно также использовать:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
1
ответ дан sth 7 November 2017 в 00:15
поделиться

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

imageElement.naturalHeight

и

imageElement.naturalWidth

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

306
ответ дан MultiplyByZer0 7 November 2017 в 00:15
поделиться

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

var imgWidth = $("#imgIDWhatever").width();
63
ответ дан Ian Suttle 7 November 2017 в 00:15
поделиться

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;
425
ответ дан CMS 7 November 2017 в 00:15
поделиться

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

26
ответ дан Thinker 7 November 2017 в 00:15
поделиться

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

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

755
ответ дан Dan Atkinson 7 November 2017 в 00:15
поделиться

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

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';
18
ответ дан 22 November 2019 в 22:05
поделиться

Ответ JQuery:

$height = $('#image_id').height();
$width  = $('#image_id').width();
2
ответ дан 22 November 2019 в 22:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: