Creación de Thumbnails de imágenes con PHP

      

Autor: Jorge Luis Martinez M

Para los que no estan familiarizados con el termino esto se refiere a previsualizaciones de menor tamaño de una imagen original lo cual se utiliza mucho para galerias, mostrando una copia de la imagen original pero de menor tamaño tanto en pixeles como en tanto por ciento.

Para el ejemplo utilizare una como formato de imagen el GIF, primero presentare el código y luego la explicación línea por línea al igual que como hacerlo con diferentes formatos de imagen.

Supongo que el nombre del archivo es imagen.php

<?php 
 
      //Una Creacion De Jorge Luis Martinez M 

 
      //http://misCodigos.jlmnetwork.com/ 

      
/*Este Archivo Recibe Los Parametros $ruta, Que Es La Ruta Interna De La Imagen En El Servidor, 
Y Los Parametros $ancho y $alto Que Se Refiere Al Alto Y Ancho De La Previsualizacion.*/
 

$fuente = @imagecreatefromgif($ruta);

$imgAncho = imagesx ($fuente);

$imgAlto =imagesy($fuente);

$imagen = ImageCreate($ancho,$alto);
 
ImageCopyResized($imagen,$fuente,0,0,0,0,$ancho,$alto,$imgAncho,$imgAlto);
 

Header("Content-type: image/gif");
imageGif($imagen);
 

?> 

Nota: La explicación la hago suponiendo un conocimiento básico de php por parte del lector.

Lo primero es recordar que este archivo recibe los parámetros $ruta que es la ruta interna de la imagen en el servidor, entonces si el fichero imagen.php se encuentra en:

http://www.servidor.com/cuenta/imagen.php

Y la imagen, en este caso supondremos el nombre "/articulos/tutoriales/php/01.gif", se encuentra en:

http://www.servidor.com/cuenta/galeria/01.gif

A imagen.php sólo le pasaremos galeria/01.gif como valor de ruta:

http://www.servidor.com/cuenta/imagen.php?ruta=galeria/01.gif

Pero esto no es todo, recordemos que recibe otros dos parámetros, los cuales son alto y ancho, estos no se refieren al alto y ancho de la imagen original, se refieren al alto y ancho que queremos la previsualización (Thumbnail), entonces si queremos que nos devuelva la imagen 01.gif, ubicada en el directorio galeria y cuyo tamaño original es de 400 píxeles de anchura y 300 píxeles de altura pero queremos la previsualización de 200 píxeles de anchura y 150 píxeles de altura tendriamos que llamarla de esta manera:

http://www.servidor.com/cuenta/imagen.php?ruta=galeria/01.gif&ancho=200&alto=150

Nota: Obviamente si lo llamamos para presentarlo como imagen dentro de un archivo al usuario(.html, .php, etc), lo llamamos mediante el tag IMG:

<IMG SRC="http://www.servidor.com/cuenta/imagen.php?ruta=galeria/01.gif&ancho=200&alto=150"> 

Ahora que ya sabemos como llamar a la imagen, vamos a ver como se hace la previsualización (Thumbnail), como es que se crea desde una imagen más grande una imagen más pequeña tanto en píxeles como en tamaño para su presentación al usuario.

Primero creamos una copia de la imagen desde archivo, la igualamos a $fuente, ya que allí quedará un identificador de tipo ENTERO (INT) para dirigirnos a la imagen creada, esto es necesario ya que será de esta imagen que haremos la previsualización (Thumbnail).

$fuente = @imagecreatefromgif($ruta);

Nota: Recuerde que el @imagecreatefromgif() es para imagenes gif, si quiere crear jpeg o png solamente cambie el gif:

@imagecreatefromjpeg($ruta) ó @imagecreatefrompng($ruta)

Ahora obtendremos la anchura y altura de la imagen original, esto es necesario para poder hacer la copia de la imagen, para ello utilizamos las funciones imageSX y imageSY, que reciben como parametro un identificador de imagen (en este caso $fuente, que es el identificador de la imagen original) y devuelven la anchura y altura de la imagen respectivamente.

$imgAncho = imagesx ($fuente); 

$imgAlto = imagesy ($fuente); 

Ahora creamos una imagen nueva en blanco con la anchura y altura que queremos para la previsualización (Thumbnail) y que será la que se le devuelva al usuario cuando se le llame, ya sea directamente en el browser o por medio de la etiqueta IMG de html.

$imagen = ImageCreate ($ancho, $alto); 

Ahora lo más importante, copiaremos la imagen original a la imagen nueva, lo cual hará que al tener un menor tamaño (la imagen nueva), la copia de que hacemos de la original se ajustara al tamaño de esta.

Utilizamos la funcion ImageCopyResized() la cual sirve para copiar "partes" de una imagen a otra por medio de coordenadas, pero en nuestro caso no necesitamos un pedazo, necesitamos copiar toda la imagen en todo el espacio de la nueva imagen, por ello damos las coordenadas totales de las imágenes.

Esto puede sonar un poco confuso, por eso es mejor que mires la documentacion oficial en http://www.php.net/ para información sobre los parametros que recibe esta función.

ImageCopyResized($imagen,$fuente,0,0,0,0,$ancho,$alto,$imgAncho,$imgAlto); 

Listo, ya tenemos nuestra imagen, ahora debemos indicarle al navegador que vamos a devolver una imagen de tipo gif, para ello enviamos la cabecera diciendo el tipo de contenido que enviaremos al navegador.

Header("Content-type: image/gif"); 

Nota: Recuerde, si el formato es jpeg o png solamente cambie el gif:

image/jpeg ó image/png

Ahora devolvemos la imagen directamente al browser(navegador) del usuario.

imageGif($imagen);

Nota: Recuerde, si el formato es jpeg o png solamente cambie el gif: imageJpeg($imagen) o imagePng($imagen)

Bien espero haya quedado claro, pero vamos a ver otro aspecto, que tal si no queriamos devolver la imagen, lo que queriamos era guardar la nueva imagen (Thumbnail) en el servidor, para su uso posterior?...

Al ponerle un segundo parametro al imageGif($imagen,"/articulos/tutoriales/php/imagenPequena.gif"), Lo lograremos, en este caso guardaria la imagen que acabamos de crear en el servidor, especificamente en la misma carpeta con el nombre de "/articulos/tutoriales/php/imagenPequena.gif".

Esto puede ser muy util, ya que si queremos crear thumbnails de todas las imagenes en un directorio, podemos hacer un loop que lea los archivos del directorio, y repita el proceso anterior(de crear imagen en blanco y copiar) y guarde las nuevas imagenes para su uso posterior, realmente es una herramienta con muchos usos.

Nota: Cabe recordar que su servidor tiene que tener soporte para manipular imágenes, según el tipo que desee utilizar, en caso de no tenerlo el servidor le dará un mensaje de error como "Jpeg is no support..." dependiendo del formato de imagen.

Suerte y hasta el próximo tutorial!

Scour Design ™ Todos los Derechos Reservados © Carlos Carmona