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

Ответ 1

Вы можете получить исходные размеры изображения, используя свойства naturalWidth и naturalHeight объекта dom.

Eg.

var image = document.getElementById('someImage');

var originalWidth = image.naturalWidth; 
var originalHeight = image.naturalHeight;

С jQuery это будет выглядеть так:

var image = $('#someImage');

var originalWidth = image[0].naturalWidth; 
var originalHeight = image[0].naturalHeight;

Ответ 2

HTML:

  <img id="myimg" src="http://azart-cash.ru/big_pics/kazino_AzartPlay.png"
  width="120" height="140"/>

JavaScript:

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = $("#myimg").attr('src');

Или просто проверьте здесь http://jsfiddle.net/Increazon/A5QJM/1/

Ответ 3

Единственный способ получить исходный размер - восстановить его в исходное состояние. Вы можете сделать это довольно легко, клонировав изображение, а затем удалив атрибуты высоты и ширины, чтобы получить реальные значения. Вы также должны затем вставить измененное изображение на страницу, иначе оно не будет иметь расчетную высоту/ширину. Вы можете сделать это легко в offscreen div. Вот пример:

http://jsbin.com/ocoto/edit

JS:

// Copy the image, and insert it in an offscreen DIV
aimgcopy = $('#myimg').clone();
$('#store').append(aimgcopy);

// Remove the height and width attributes
aimgcopy.removeAttr('height');
aimgcopy.removeAttr('width');

// Now the image copy has its "original" height and width
alert('Height: '+aimgcopy.height()+' Width: '+aimgcopy.width());

CSS:

  #store {  position: absolute;  left: -5000px; }

HTML:

  <img id="myimg" src="http://sstatic.net/so/img/logo.png" width="300" height="120"/>
  <div id="store"></div>

Ответ 4

Мне пришлось выполнить аналогичную задачу с созданным jQuery-плагином. Он сохраняет состояние для текстового значения ввода, но этот принцип можно легко использовать для вашей ширины и высоты.

Я бы создал пользовательский объект, в котором хранятся исходный идентификатор объекта, ширина и высота. Затем этот объект помещается в массив. Когда требуется восстановить значение, просто зациклируйте массив пользовательских объектов в соответствии с идентификатором и бинго, объект с исходной шириной и высотой.

Вы можете проверить мой код плагина www.wduffy.co.uk/jLabel, чтобы узнать, как я это сделал. В зависимости от того, сколько изображений вы меняете, массив может немного стать на тяжелой стороне.

Пример может выглядеть как

var states = new Array();

function state($obj) {

    // Public Method: equals
    this.equals = function($obj) {
        return $obj.attr('id') == this.id;
    };

    // Public Properties
    this.id = $obj.attr('id');
    this.width = $obj.attr('width');
    this.height = $obj.attr('height');

};

function getState($obj) {
    var state; 

    $.each(states, function() {
        if (this.equals($obj)) {
            state = this;
            return false; // Stop the jQuery loop running
        };
    });

    return state;
};

Ответ 5

Попробуйте следующее:

$("<img>")
            .attr("src", element.attr("src"))
            .load(function(){
                MG.originalSize[0] = this.width;
                MG.originalSize[1] = this.height;

});