Jorge Vallejo Blog

Blog del creativo, ilustrador y profesor de videojuegos Jorge Vallejo

Redimensionado de imagenes en javascript

Lo primero que debemos tener claro es que este metodo de redimensionar una imagen con javascript modificará sus propiedades temporales y no el archivo de la imagen, sin embargo puede resultarnos muy ítil para dar efectos,mostrar como quedaría una imagen antes de redimensionarla etc.

Utilizando el DOM (Document Objet Model)
Le damos un id a nuestra imagen por ejemplo ima.
<img src="rutalaimagen" id="ima" />

Con document.getElementById(‘ima’) accedermos nuestro elemento imagen.
Para saber las medidas de la imagen:

alturaIma=document.getElementById('ima').offsetHeight;
anchuraIma=document.getElementById('ima').offsetWidth;

Nos devuelve la altura y la anchura en numero de pixeles respectivamente.
Para asignar un tamaño

document.getElementById("ima").style.height=numero+"px";
document.getElementById("ima").style.width=numero+"px";

Tenemos que añadir a la variable numero la cadena px, para que sepa que se lo damos en pixeles.
Proporción
Utilizando todo podemos crear imagenes proporcionales, y reducirlas o aumentarlas segun varie la variable numero.

alturaIma=document.getElementById('ima').offsetHeight;
anchuraIma=document.getElementById('ima').offsetWidth;
if(alturaIma>=anchuraIma){
proporcion=anchuraIma/alturaIma;
document.getElementById("ima").style.height= numero+"px";
document.getElementById("ima").style.width=(numero*proporcion)+"px";
}else{
//Mas ancho q largo
proporcion=alturaIma/anchuraIma;
document.getElementById("ima").style.width= numero+"px";
document.getElementById("ima").style.height=(numero*proporcion)+"px";
}

Leave a Reply

Your email address will not be published. Required fields are marked *