¿Hay alguna forma de leer el "naturalWidth" de una imagen con jquery?

Question

me trataron con algo como esto:

var Height = $(this).naturalHeight; 

Pero no funciona. ¿Hay alguna manera de hacer que

Gréez

Answer 1

$this.css('height', 'auto'); 
var height = $this.height(); 

Answer 2

Lo mejor que puede hacer es ocultar una imagen sin ajustar el ancho y la altura y el uso de la fuente de imagen para la imagen como la imagen original. Luego calcule la dimensión de esta imagen oculta.

O bien puede calcular la dimensión física en el lado del servidor y pasarla a un elemento oculto en la página y obtener el tamaño del valor del elemento oculto.

Answer 3

Una forma de obtener las dimensiones de una imagen es para cargar dinámicamente una copia de la imagen usando javascript y obtener sus dimensiones:

// preload the image 
var height, width = ''; 
var img = new Image(); 
var imgSrc = '/path/to/image.jpg'; 

$(img).load(function() { 
    alert('height: ' + img.height); 
    alert('width: ' + img.width); 
    // garbage collect img 
    delete img; 
}).error(function() { 
    // image couldnt be loaded 
    alert('An error occurred and your image could not be loaded. Please try again.'); 
}).attr({ src: imgSrc }); 

Answer 4

A mi me parece como la solución aceptada modifica la apariencia del objeto . Ocasionalmente jQuery es un poco útil y tienes que decirlo para que se salga de tu camino. Si desea usar naturalWidth o naturalHeight, simplemente use el que ya existe convirtiendo el objeto jQuery en una referencia nativa del elemento del navegador.

var Height = document.getElementById($(this).attr("id")).naturalHeight; 

Answer 5

sólo se intenta

var width = $("img", this).css('width', 'auto').width(); 
var height= $("img", this).css('height', 'auto').height(); 

es básicamente el cálculo para naturalWidth y naturalHeight todos modos

Answer 6

Aquí es un ejemplo de una función de jQuery, que funciona en las versiones anteriores de IE incluso para las grandes imágenes.

/* 
* NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load. 
* @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined. 
*/ 
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) { 
    var img = this[0]; 
    var naturalWidth = img.naturalWidth; 
    if (naturalWidth) { 
     onNaturalWidthDefined(img); 
    } else { //No naturalWidth attribute in IE<9 - calculate it manually. 
     var newImg = new Image(); 
     newImg.src = img.src; 
     //Wait for image to load 
     if (newImg.complete) { 
      img.naturalWidth = newImg.width; 
      onNaturalWidthDefined(img); 
     } else { 
      $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)}); 
     } 
    } 
}; 

uso es simple:

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)}); 

Answer 7

Fuente De HERE

He aquí una breve jQuery (cualquier versión) plugin que añade dos métodos: naturalWidth() y naturalHeight(). Utiliza ramificación para determinar si el Ancho natural y la Altura natural son compatibles con el navegador. Si es compatible, el método se convierte en un getter para la propiedad naturalWidth o naturalHeight. Si no es compatible, el método crea un nuevo elemento de imagen sin estilo y devuelve el ancho y la altura reales de ese elemento.

// adds .naturalWidth() and .naturalHeight() methods to jQuery 
    // for retreaving a normalized naturalWidth and naturalHeight. 
    (function($){ 
    var 
    props = ['Width', 'Height'], 
    prop; 

    while (prop = props.pop()) { 
    (function (natural, prop) { 
     $.fn[natural] = (natural in new Image()) ? 
     function() { 
     return this[0][natural]; 
     } : 
     function() { 
     var 
     node = this[0], 
     img, 
     value; 

     if (node.tagName.toLowerCase() === 'img') { 
     img = new Image(); 
     img.src = node.src, 
     value = img[prop]; 
     } 
     return value; 
     }; 
    }('natural' + prop, prop.toLowerCase())); 
    } 
    }(jQuery)); 

    // Example usage: 
    var 
    nWidth = $('img#example').naturalWidth(), 
    nHeight = $('img#example').naturalHeight(); 

Answer 8

uso el nativo de JavaScript atributos

.naturalWidth/.naturalHeight

en un objeto jQuery yo uso

var width = $(this).get(0).naturalWidth; 
var height = $(this).get(0).naturalHeight; 

o

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight; 

si no se ha seleccionado ningún objeto jQuery.

With get(0) on a jQuery object you can access the associated DOM-element. En el elemento DOM nativo puede trabajar con el código javascript nativo (acceda aquí al atributo nativ javascript .naturalWidth)