¿Cómo puedo obtener el ancho y alto de la imagen real usando jQuery?

Question

En una página he mostrado 100 imágenes, que tienen el ancho y el atributo de altura ha cambiado. La identificación de la imagen está en un bucle.

¿Cómo obtengo el tamaño de la imagen original, dentro de este ciclo?

$(this).appendTo(".prod_image").attr('height',150).attr('width',150).attr('title','').attr('name','').attr('alt','').attr('id','id'+i); 

Answer 1

La única manera de obtener el tamaño original es restaurarlo a su estado original. Puede hacer esto fácilmente clonando la imagen y luego eliminando los atributos de altura y ancho para obtener los valores reales. También debe insertar la imagen modificada en la página o, de lo contrario, no tendrá una altura/ancho calculados. Puedes hacerlo fácilmente en un div fuera de la pantalla. He aquí un ejemplo:

http://jsbin.com/ocoto/edit

El 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()); 

El CSS:

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

El HTML:

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

Answer 2

tuviera que realizar una tarea similar Wisconsin el plugin jQuery que creé Mantiene el estado para un valor de texto de entrada, pero el principio podría usarse fácilmente para su ancho y altura.

Crearía un objeto personalizado que almacene el ID, el Ancho y el Alto del objeto original. Ese objeto luego se pone en una matriz. Cuando sea necesario restaurar el valor, simplemente recorra la matriz de objetos personalizados para que coincida con el ID y el bingo, un objeto con el ancho y el alto originales.

Puedes consultar el código de mi complemento en www.wduffy.co.uk/jLabel para ver cómo lo implementé. Dependiendo de la cantidad de imágenes que está cambiando, la matriz podría ser un poco pesada.

Un ejemplo podría ser similar

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

Answer 3

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

O simplemente comprobar que funciona aquí http://jsfiddle.net/Increazon/A5QJM/1/

Answer 4

Puede r Obtenga las dimensiones originales de una imagen usando las propiedades naturalWidth y naturalHeight del objeto dom.

Por ejemplo.

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

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

con jQuery que se vería así:

var image = $('#someImage'); 

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

Answer 5

prueba este:

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

});