2012-09-03 10 views
7

SOLUCIONADO: Sintaxis-error

El siguiente código funciona:¿Cómo obtener el tamaño original de una imagen -Jquery

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; 
} 

pregunta original

quiero para obtener el ancho y el alto originales de una imagen y probar diferentes códigos para lograrlo. Mi función se activa al hacer clic y todas las imágenes cambian de tamaño a 400x300.

Me trataron de cambiar el tamaño de la imagen a su tamaño original mediante el uso de 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'); 
} 

Colocación auto no cambió el tamaño de la imagen.

alert(id.attr('width')); siempre devuelve 'indefinido'. por lo que no funciona

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); funciona a la perfección.

alert(image.heigth); returns undefined.

El uso de imageObject.naturalWidth funciona como el de arriba - el ancho se da correctamente pero la altura no está definida.

He leído que tiene que agregar el nuevo objeto de imagen, pero cuando uso imageObject.appendTo('body'); ni siquiera puedo hacer clic en la imagen.

Gracias por cualquier sugerencia.

+0

Una vez que se cambia el tamaño de la imagen, auto no va a traer de vuelta otra vez. En cuanto a obtener el tamaño de la imagen, primero debe cargarse. – adeneo

+0

error de sintaxis 'image.heigth':" altura " –

+0

oh, lo escribí mal muchas veces, cambiando la sintaxis lo resolvió – CadanoX

Respuesta

2

Este es un ejemplo simple y simple de reemplazar una imagen por una que tiene sus tamaños originales después de haber sido alterada.

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

Una alternativa sería eliminar el estilo que se aplicó:

myImg.removeAttribute("style"); 
Cuestiones relacionadas