Получить полный размер изображения в javascript / jquery

Question

У меня есть изображение на странице, которое было изменено в соответствии с размером, скажем, 400x300.Как я могу получить полный размер изображения (~ 4000x3000) в jQuery?Кажется, что .width () и .height () возвращают только текущий размер изображения.

Answer 1

Изображения имеют свойства naturalWidth и naturalHeight, которые содержат фактическую неизмененную ширину и высоту изображения, то есть реальные размеры изображения, а не то, что CSS устанавливает для него.

Все равно придется подождать, пока изображение загрузится, хотя

$('#idOfMyimg').on('load', function() {
    var height = this.naturalHeight,
        width  = this.naturalWidth;
});

Другим вариантом будет создание нового изображения с тем же файлом, что и у источника, и получение от него размеров, если оно никогда не добавляется в DOM, внешние стили не влияют на него

var img = new Image();

img.onload = function() {
   var height = this.height,
       width  = this.width;
}
img.src = $('#idOfMyimg').attr('src');

FIDDLE

Answer 2

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

jsFiddle Демо здесь: http://jsfiddle.net/58dA2/

Код:

$(function() {
   var img = $('#kitteh'); // image selector
   var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    $('#height').text(hiddenImg.height());
    $('#width').text(hiddenImg.width());
    hiddenImg.remove();            
});​

Answer 3

Вы можете сделать это с Image объектом, который содержит тот же исходный файл, как:

var preloader = new Image();
preloader.src = 'path/to/my/file.jpg';

preloader.onload = function(){
var height = preloader.height;
var width = preloader.width;
}

Answer 4

Попробуйте это:

var pic = $ ("img")

// необходимо удалить их, если в img-элементе установлены ширина и высота. Pic.removeAttr ("width«);pic.removeAttr ("высота");

var pic_real_width = pic.width ();var pic_real_height = pic.height ();