Jak zdobyć oryginalnego rozmiaru obrazu -Jquery

Question

rozwiązany: Syntax Error

Poniższy kod działa:

var image = {width:0,height:0}; 
var imageObject = new Image(); 
function getImageSize(id) { 
    imageObject.src = id.attr("src"); 
    image.width = imageObject.width; 
    image.height = imageObject.height; 
} 

---

oryginalne pytanie

chcę aby uzyskać oryginalną szerokość i wysokość obrazu i wypróbował inny kod, aby to osiągnąć. Moja funkcja wyzwala w przypadku zdarzenia kliknięcia, a wszystkie obrazy są przeskalowywane do rozmiaru 400 x 300.

Próbowałem zmienić rozmiar obrazu do jego pierwotnego rozmiaru za pomocą auto:

var image = {width:0,heigth:0}; 
function getImageSize(id) { 
    id.css({ 
     'width': 'auto', 
     'heigth': 'auto' 
    }); 
    image.width = id.attr('width'); 
    image.heigth = id.attr('heigth'); 
} 

Mocowanie auto nie zmienić rozmiar obrazu.

alert(id.attr('width')); zawsze zwraca "niezdefiniowany". więc nie działa

var image = {width:0,heigth:0}; 
var imageObject = new Image(); 
function getImageSize(id) { 
    imageObject.src = id.attr("src"); 
    image.width = imageObject.width; 
    image.heigth = imageObject.heigth; 
} 

alert(image.width); działa idealnie.

alert(image.heigth); zwraca niezdefiniowane.

Używanie imageObject.naturalWidth działa jak wyżej - szerokość jest podawana poprawnie, ale wysokość jest niezdefiniowana.

Przeczytałem, że musisz dołączyć nowy obiekt obrazu, ale kiedy używam imageObject.appendTo('body');, nie mogę nawet kliknąć obrazu.

Dzięki za wszelkie sugestie.

Answer 1

Jest to prosty zamknięty przykład zastąpienia obrazu oryginalnym rozmiarem po zmianie.

<img src="http://www.finesttreeserviceaz.com/wp-content/uploads/2012/02/tree2.gif" id="bar" /> 
<script type="text/javascript"> 
    var myImg = document.getElementById("bar"); 
    myImg.setAttribute("style", "width:400px;height:300px;"); 
    function resetBar() { 
     var newImg = new Image(); 
     var oldImage = document.getElementById("bar"); 
     newImg.src = oldImage.src; 
     oldImage.parentNode.replaceChild(newImg, oldImage); 
    } 
    setTimeout("resetBar();", 2000); 
</script> 

Alternatywą byłoby usunąć styl, który został zastosowany:

myImg.removeAttribute("style");