Dimensiones de una imagen.

AlMutamid · #1 (**permalink**) 20/01/2005, 11:11

Bueno, ante todo un saludo a todos. Este es mi primer post por acá. Perdonenme si esto que pregunto ya fue contestado con anterioridad, pero soy nuevito

.
Tengo el siguiente código:

<html>
<head><title>probando</title>
<script type="text/javascript">
function dimensionesImagen(){
var xxx=document.getElementById('DATEINAME').value;
var img=document.createElement('img');
img.setAttribute('src',xxx);
document.getElementById('ancho').value = img.width;
document.getElementById('alto').value = img.height;
}
</script>

</head>

<body>
<form method="get">
<INPUT size="30" maxlength="30" type="file" id=DATEINAME name=DATEINAME onchange="dimensionesImagen();">
<input type="hidden" id="ancho" name="ancho"/>
<input type="hidden" id="alto" name="alto" />
<div id="prevImage"></div>
<input type="submit" value="vamos alla"/>
</form>
</body>
</html>

Pues bien. En las pruebas que he realizado, con imagenes de 32x32 funciona perfectamente. El caso, es que al intentarlo con una ímagen de, por ejemplo 800x600, sólo me pasa los valores 0 tanto para el ancho como para el alto.
Qué hago mal?
Espero haberme explicado correctamente y que puedan ayudarme.
Muchas gracias y un saludo a todos.

caricatos · #2 (**permalink**) 20/01/2005, 14:24

Hola AlMutamid, bienvenido a los foros

:

Sí, esa pregunta ya la he visto, y la he contestado, pero hay veces que no es fácil encontrar lo que se busca, así que no te preocupes.

Lo que pasa es que las imágenes tardan algo en cargarse, así que es recomendable hacer un bucle consultando el atributo complete de las imágenes, que indica que se han cargado, y es entonces cuando los valores width y height son fiables...

Retocando tu código, podría ser así:

<html>
<head><title>probando</title>
<script type="text/javascript">
var img;
function cargando() {
if (img.complete) {
document.getElementById('ancho').value = img.width;
document.getElementById('alto').value = img.height;
}
else
setTimeout("cargando()", 100);
}

function dimensionesImagen(){
var xxx=document.getElementById('DATEINAME').value;
img=document.createElement('img');
img.src = xxx;
cargando();
}
</script>

</head>

<body>
<form method="get">
<INPUT size="30" maxlength="30" type="file" id=DATEINAME name=DATEINAME onchange="dimensionesImagen();">
<input type="hidden" id="ancho" name="ancho"/>
<input type="hidden" id="alto" name="alto" />
<div id="prevImage"></div>
<input type="submit" value="vamos alla"/>
</form>
</body>
</html>

Lo hice un poco a ojo, pero si no hay errores de sintaxis, debería funcionar.

Saludos

AlMutamid · #3 (**permalink**) 21/01/2005, 03:11

Hola, saludos. Muchas gracias

. Ya está solucionado el problema para IE. Lo que no entiendo, porque no funciona en Mozilla ??. Incluso he cambiado el método del formulario por post (con get, pues no enviaría el archivo y pensé, a ver si va a ser por esto ...), pero nada. Quizás no me esté cargando la imagen? En img.complete me devuelve true. Llevo un rato dandole vueltas, y no doy con el problema (porque complete, debería funcionar,no?).

Muchas gracias por la ayuda :).

caricatos · #4 (**permalink**) 21/01/2005, 03:49

Hola otra vez:

Para Mozilla creo que tienes que añadir el protocolo "file:///" para que te funcione lo que pretendes.
Fíjate en este link: http://www.pepemolina.com/archivos_bd/index.html

Saludos

AlMutamid · #5 (**permalink**) 21/01/2005, 04:42

Muchas gracias.