Redimensionar imagenes con Javascript

viska · #1 (**permalink**) 12/11/2009, 03:36

Hola!

Necesito redimensionar imagenes sin que pierdan la proporcion de tamaño. Probe a usar max-width y max-height de CSS, y funcionan de maravilla, simple y sencillo ¿no?, Pues no, porque ahi esta el MS IE para fastidiar. Funciona con todos navegadores excepto IE.

El caso es que he leido por ahi que debe de hacer usando javascript para que funcione tambien con IE. Mi pagina esta desarrollada en php. No tengo idea de programar en javascript asi que, viendo algo de codigo por internet, he improvisado una funcion que, en la parte logica funcionara perfectamente, pero supongo que tendra errores de sintaxis, si podeis corregirmela os lo agradeceria.

Código:

<script>
function Ancho_y_Alto(mX,mY,imagen){
	foto=new Image();
	foto.src=imagen;
	var rX=foto.width;
	var rY=foto.height;
	var varX=110;
	var varY=110;
	if(rX > mX){ 
		varX=mX;
		if(rY / (rX/mX) > mY){
			varY=mY;
			varX=rX/(rY/mY);
		}else{
			varY=rY/(rX/mX);
		}
	}else{
		if(rY > mY){
			varY=mY;
			varX=rX/(rY/mY);
		}else{
			varX=rX;
			varY=rY;
		}
	}
	return "width=" + varX + " height=" + varX;
}
</script>

Por lo demas, necesito que me expliqueis como emplear esta funcion en una pagina php/html, es decir, donde declararle y, lo que es mas importante, donde y como llamarla.

Si os fijais mi idea es que la funcion te devuelva una cadena del estilo "width=400 height=240" y esta cadena, pegarla aplicarla directamente en una etiqueta IMG. Aunque creo que este metodo funciona para PHP, en javascript igual no... si teneis cualquier idea para mejorarla u otra manera de hacer esto...

Bueno como veis necesito ayuda, espero vuestra respuesta!
Muchas gracias de antemano!

Panino5001 · #2 (**permalink**) 12/11/2009, 05:02

Y ya que estás en php no te convendría redimensionarla con GD? Porque con javascript sólo redimensionarás el tamaño visual, pero no el peso, y en cambio eso sí lo lograrás con GD...
Por otro lado, creo que tendrías que trabajarlo un poco más el script. Algo así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<script>
function Ancho_y_Alto(mX,mY,imagen,scope){
	var sc=scope || document.body,varX,varY, rX, rY,foto,image;
	sc.appendChild(foto=document.createElement('img')).src=imagen;
	foto.style.visibility='hidden';
	image=new Image().src=imagen;
	rX=foto.offsetWidth;
	rY=foto.offsetHeight;
	if(rX > mX){ 
		varX=mX;
		if(rY / (rX/mX) > mY){
			varY=mY;
			varX=rX/(rY/mY);
		}else{
			varY=rY/(rX/mX);
		}
	}else{
		if(rY > mY){
			varY=mY;
			varX=rX/(rY/mY);
		}else{
			varX=rX;
			varY=rY;
		}
	}
	setTimeout(function(){
		foto.style.width=varX+'px';
		foto.style.height=varY+'px';
		foto.style.visibility='visible';
	},10);
}
Ancho_y_Alto(100,300,'1.jpg');
Ancho_y_Alto(100,300,'20.jpg');
Ancho_y_Alto(100,300,'10.jpg');
Ancho_y_Alto(100,300,'15.jpg');

</script></body>
</html>

viska · #3 (**permalink**) 12/11/2009, 05:14

No. Se me ha olvidado comentarlo, el servidor no permite el uno de GD. Es decir, ni getimagesize(), ni imagesx() ni imagesy(), etc...

Saludos! Animo.... xD

Adler · #4 (**permalink**) 12/11/2009, 06:43

Hola

A ver si te sirve este otro

Código javascript:

Ver original<html>
<head>
<script type="text/javascript">
function redimensionar (accion) {
var height, width
var alto = document.getElementById("mesa").height;
var ancho = document.getElementById("mesa").width;
if (accion == 'sumar') {
height = parseInt(alto+10);
width = parseInt(ancho+10);
document.getElementById("mesa").style.height = height + "px";
document.getElementById("mesa").style.width = width + "px";
}
else
{
height = parseInt(alto-10);
width = parseInt(ancho-10);
document.getElementById("mesa").style.height = height + "px";
document.getElementById("mesa").style.width = width + "px";
}
}
</script>
</head>
<body>
<img src="iconos/anixmas11.gif" id="mesa" width="50px" height="53px" /><br/>
<input type="button" value="+" onclick="redimensionar('sumar')" /><br/>
<input type="button" value="-" onclick="redimensionar()" />
</body>
</html>

Suerte