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

Ad debug output

The ad is displayed on the page

current post: Redimensionado de imagenes en javascript, ID: 143

Ad: Anuncio2 (2573)
Placement: After Content 2 (after-content_2)

Display Conditions
general conditions
Adwp_the_query
term_id0
taxonomy0
is_main_query11
page01
numpages01
is_archive1
is_search1
is_home1
is_4041
is_attachment1
is_singular11
is_front_page1
is_feed1




Find solutions in the manual

Leave a Reply

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