Obtener el tamaño completo de la imagen en javascript/jquery

Question

Tengo una imagen en la página que ha sido redimensionada para encajar en un div, digamos, 400x300. ¿Cómo puedo obtener el tamaño completo de la imagen (~ 4000x3000) en jQuery? .width() y .height() solo parecen devolver el tamaño actual de la imagen.

Answer 1

imágenes tienen naturalWidth y naturalHeight propiedades que contienen la anchura real, no modificado y la altura de la imagen, es decir, las dimensiones reales de la imagen, no lo que CSS establece.

Uno todavía tendría que esperar a que se cargue la imagen, aunque

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

Otra opción sería la creación de una nueva imagen con el mismo archivo como la fuente, y obtener las dimensiones de que, siempre y cuando nunca ha añadido a la DOM, estilos externos no afectarán que

var img = new Image(); 

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

FIDDLE

Answer 2

Usted puede hacer esto con un objeto Image que mantiene el mismo archivo de origen como:

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

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

Answer 3

Prueba esto:

var pic = $ ("img")

// necesidad para eliminarlos en caso de que img-element haya establecido ancho y alto pic.removeAttr ("ancho"); pic.removeAttr ("altura");

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

Answer 4

Puede clonar la imagen, eliminar los atributos de alto y ancho, anexarla al cuerpo y obtener el ancho y el tamaño antes de eliminarla.

jsFiddle demo es aquí: http://jsfiddle.net/58dA2/

Código es:

$(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();    
});​