Jak uzyskać naturalne wymiary obrazu za pomocą javascript lub jquery?

Question

Mam ten kod do tej pory:

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

Jednak to wpędza mnie atrybutów HTML - style CSS. Chcę uzyskać wymiary rzeczywistego zasobu obrazu pliku.

Potrzebuję tego, ponieważ po przesłaniu obrazu jego szerokość zostanie ustawiona na 0 pikseli i nie mam pojęcia, dlaczego tak się dzieje. Aby temu zapobiec, chcę uzyskać rzeczywisty wymiar i zresetować je. czy to możliwe?

Edycja: Nawet gdy próbuję uzyskać naturalWidth, otrzymuję 0 jako wynik. Dodałem zdjęcie. Dziwne jest to, że dzieje się tak tylko wtedy, gdy przesyłam nowe pliki i po odświeżeniu działa tak, jak powinien.

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

Answer 1

Można użyć naturalWidth i naturalHeight, właściwości te zawierać rzeczywiste, niemodyfikowanych szerokość i wysokość obrazu, ale trzeba poczekać, aż obraz został załadowany, aby uzyskać do nich

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

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

To jest tylko obsługiwane od IE9 i wyżej, jeśli musisz obsługiwać starszą przeglądarkę, możesz utworzyć nowy obraz, ustawić jego źródło na ten sam obraz, a jeśli nie zmienisz rozmiaru obrazu, zwróci on obrazy o naturalnym rozmiarze, będzie to ustawienie domyślne, gdy nie zostanie podany inny rozmiar:

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

Istnieje img.naturalHeight i img.naturalWidth który daje szerokość i wysokość samego obrazu, a nie elementu DOM.

Answer 3

Możesz użyć następującej funkcji, którą stworzyłem.

Funkcja

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"> 

używać go tak jak to

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