Ottieni l'immagine completa in javascript/jquery

Question

Ho un'immagine sulla pagina che è stata ridimensionata per adattarsi a un div, ad esempio 400x300. Come posso ottenere l'intera dimensione dell'immagine (~ 4000x3000) in jQuery? .width() e .height() sembrano solo restituire la dimensione corrente dell'immagine.

Answer 1

immagini hanno naturalWidth e naturalHeight proprietà che contengono la larghezza effettiva, non modificato e l'altezza dell'immagine, cioè le dimensioni reali l'immagine, non ciò che il CSS lo imposta.

Si sarebbe ancora aspettare per l'immagine da caricare se

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

Un'altra opzione potrebbe essere quella di creare una nuova immagine con lo stesso file come sorgente, e ottenere le dimensioni da che, fino a quando non è mai aggiunto al DOM, gli stili non esterni influenzeranno lo

var img = new Image(); 

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

FIDDLE

Answer 2

È possibile farlo con un oggetto Image che contiene lo stesso file di origine come:

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

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

Answer 3

Prova questo:

var pic = $ ("img")

// necessità per rimuoverli, nel caso in cui img-elemento abbia impostato larghezza e altezza pic.removeAttr ("width"); pic.removeAttr ("altezza");

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

Answer 4

È possibile clonare l'immagine, rimuovere gli attributi di altezza e larghezza, aggiungerla al corpo e ottenere la larghezza e la dimensione prima di rimuoverla.

jsFiddle demo è qui: http://jsfiddle.net/58dA2/

Codice è:

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