Jorge Vallejo Blog

Blog del creativo, ilustrador y profesor de videojuegos Jorge Vallejo

Category: redimensionar

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

Problema redimensionar imagenes con php


Voy a hablaros de un problema que a la hora de redimensionar imagenes en php, hay unas funciones muy bonitas que rulan por internet sobre el tema, pero pocos te comentan un pequeño detalle sin el cual puedes pasarte varias horas revisando codigo, y diciendote ¿Pero que demonios esta mal? .Y es que lo primero que deberias hacer es una pagina php con el codigo php.info(); para ver las librerias que tienes instaladas y comprobar que php_gd.dll esta metida , que como lo sabes, por q al ver el php.info() tiene queaparecerte algo como esto:
GD

GD Support enabled
GD Version bundled (2.0.34 compatible)
FreeType Support enabled
FreeType Linkage with freetype
FreeType Version 2.1.10
GIF Read Support enabled
GIF Create Support enabled
JPG Support enabled
PNG Support enabled
WBMP Support enabled
XPM Support enabled
XBM Support enabled