Come ottengo le dimensioni naturali di un'immagine usando javascript o jquery?

Question

Ho questo codice finora:

var img = document.getElementById('draggable'); 
var width = img.clientWidth; 
var height = img.clientHeight; 

Tuttavia, questo mi fa gli attributi HTML - stili CSS. Voglio ottenere le dimensioni della risorsa immagine reale, del file.

Ho bisogno di questo perché al caricamento di un'immagine, la sua larghezza viene impostata su 0px e non ho idea del motivo o dove sta accadendo. Per prevenirlo voglio ottenere la dimensione attuale e resettarla. È possibile?

Modifica: anche quando provo a ottenere NaturalWidth, ottengo 0 come risultato. Ho aggiunto una foto. La cosa strana è che accade solo quando carico nuovi file e, una volta aggiornato, funziona come dovrebbe.

http://oi39.tinypic.com/3582xq9.jpg

Answer 1

Si potrebbe utilizzare naturalWidth e naturalHeight, queste proprietà contengono la larghezza effettiva, non modificato e l'altezza dell'immagine, ma bisogna aspettare fino a quando l'immagine è stata caricata per farli

var img = document.getElementById('draggable'); 

img.onload = function() { 
    var width = img.naturalWidth; 
    var height = img.naturalHeight; 
} 

Questo è solo supportato da IE9 e versioni successive, se devi supportare browser più vecchi puoi creare una nuova immagine, impostarne l'origine sulla stessa immagine e, se non modifichi le dimensioni dell'immagine, restituirà le dimensioni naturali dell'immagine, come quello sarebbe l'impostazione predefinita quando non viene fornita un'altra dimensione

var img  = document.getElementById('draggable'), 
    new_img = new Image(); 

new_img.onload = function() { 
    var width = this.width, 
     heigth = this.height; 
} 

new_img.src = img.src; 

FIDDLE

Answer 2

ci sono img.naturalHeight e img.naturalWidth che vi darà la larghezza e l'altezza dell'immagine stessa, e non l'elemento DOM.

Answer 3

È possibile utilizzare la seguente funzione che ho creato.

Funzione

function getImageDimentions(imageNode) { 
    var source = imageNode.src; 
    var imgClone = document.createElement("img"); 
    imgClone.src = source; 
    return {width: imgClone.width, height: imgClone.height} 
} 

html:

<img id="myimage" src="foo.png"> 

usare in questo modo

var image = document.getElementById("myimage"); // get the image element 
var dimentions = getImageDimentions(image); // get the dimentions 
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions