Tema: FAQ's de PHP
Ver Mensaje Individual
  #107 (permalink)  
Antiguo 09/01/2004, 10:56
ACHAVARRIA
Invitado
 
Mensajes: n/a
Puntos:
[B]Creación de Thumbnails de imágenes[/B]

Pregunta:¿Como Crear Thumbnails de imágenes?
Respuesta:


Un Thumbnails consiste en previsualizaciones de menor tamaño de una imagen original lo cual se utiliza mucho para galerías, mostrando una copia de la imagen original pero de menor tamaño.

Para el ejemplo utilizare una como formato de imagen el GIF, Primero presentare el codigo y luego la explicacion linea por linea al igual que como hacerlo con diferentes formatos de imagen.

Supongo que el nombre del archivo es imagen.php

Código PHP:
<?php 
//http://pagina.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); 

?>
Lo primero es recordar que este archivo recibe los parametros
Código PHP:
$ruta 
que es la ruta interna de la imagen en el servidor, entonces si el fichero imagen.php se encuentra por ejemplo en:

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

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

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

A imagen.php Solo Le Pasaremos galeria/01.gif como valor de ruta:

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

Pero esto no es todo, recordemos que recibe otros dos parametros, 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 previsualizacion(Thumbnail), entonces si queremos que nos devuelva la imagen 01.gif, ubicada en el directorio galeria y cuyo tamaño original es de 400 pixeles de anchura y 300 pixeles de altura pero queremos la previsualizacion de 200 pixeles de anchura y 150 pixeles de altura tendriamos que llamarla de esta manera:

http://www.servidor.com/cuenta/image...o=200&alto=150

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 previsualizacion(Thumbnail), como es que se crea desde una imagen mas grande una imagen mas pequeña tanto en pixeles como en tamaño para su presentacion al usuario.

Primero creamos una copia de la imagen desde archivo, la igualamos a $fuente, ya que alli quedara un identificador de tipo ENTERO(INT) para dirijirnos a la imagen creada, esto es necesario ya que sera de esta imagen que haremos la Previsualizacion(Thumbnail).

Código PHP:
$fuente = @imagecreatefromgif($ruta); 
Recuerdemos que el @imagecreatefromgif() es para imagenes gif, si quiere crear jpeg o png solamente cambie el gif:
Código PHP:
 @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
Código PHP:
 $fuente 
, que es el identificador de la imagen original) y devuelven la anchura y altura de la imagen respectivamente.

Código PHP:
$imgAncho imagesx ($fuente); 
$imgAlto =imagesy($fuente); 
Ahora creamos una imagen nueva en blanco con la anchura y altura que queremos para la previsualizacion(Thumbnail) y que sera 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.

Código PHP:
$imagen ImageCreate($ancho,$alto); 
Ahora lo mas importante, copiaremos la imagen original a la imagen nueva, lo cual hara 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
Código PHP:
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 imagenes.

Esto puede sonar un poco confuso, por eso es mejor que mira la documentacion oficial en http://www.php.net/ para informacion sobre los parametros que recibe esta funcion.

Código PHP:
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.

Código PHP:
Header("Content-type: image/gif"); 
Recuerdemos, que 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.

Código PHP:
imageGif($imagen); 
Recuerdemos, que 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,"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 "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.

Cabe recordar que su servidor tiene que tener soporte para manipular imagenes, segun el tipo que desee utilizar, en caso de no tenerlo el servidor le dara un mensaje de error como "Jpeg is no support..." dependiendo del formato de imagen.