Editorial
Editorial
Editorial

Creación de Thumbnails de imágenes con PHP

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 co

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 “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,”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.

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!

Jorge Luis Martinez MJorge Luis Martinez M para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: Twitter @maestros | Facebook Fan page

111 comentarios

Comentarios

Páginas: « 1 [2]

  1. rer

    no me sirvio

    poner ejemplo

  2. Wilson

    Hola muy buen articulo. tengo una pregunta estoy haciendo una aplicacion con pageflip dinamico en flash que carga imagenes desde un archivo xml que genero con php cuando los usuarios suben sus imagenes y hago la conversion de tamaño origina a tamaño de uso de mi pageflip que es 500*600 pero tengo que hacer 2 pasos uno es subir el archivo en el tamaño original y de alli creo los thumb y la resolucion no es que sea muy buena y lastimosamente son imagenes que contienen texto de lectura la cual con una funcion zoom no se ve muy bien quisiera saber si esta forma de ver los thumb me serviria para la carga con flash y si se mejoraria la calidad del thumb? cualquier comentario a mi correo por favor [email protected]
    gracias de antemano

  3. blanca

    muchas gracias por el artículo, la información de como jalar el archivo me sacó del atoyadero!!!

    mil gracias!!!!

  4. Allfarid

    Qué tal.

    El script me devuelve la misma dirección de la página, o si lo llamo con un IMG SRC no me devuelva nada.

    No es el primer script que pruebo y me hace eso. ¿Alguien sabe lo que pasa?

  5. Hola te escribo porque tengo un problema con subir imagenes con php
    es el siguiente:
    quiero hacer un sitio donde los usuarios(los que entren a mi sitio) puedan subir fotos a mi sitio y que estas se vean en el sitio en una página dedicada a esto, poder borrarlas y hacer fotos en miniatura.
    Espero que haya sido claro, desde ya muchas gracias
    espero me contestes, un abrazo

  6. muy bueno!!, la pregunta es si sopotra otro tipo de archivos ó solo es .gif?

  7. Eric

    Hola en una pagina web hay una seccion que muestra los thumnail con una pequeña sombra para las imagenes que no se estan mostrando y la imagen que si se muestra en el thumbnail no aparece esa sombra por ejemplo en esta web: http://www.varelalamar.com/index.php/media/

    como pueden ver en esa seccion los thumbnail aparecen con una pequeña sombra para las imagenes que no se estan mostrando como puedo yo quitar esa sombra y dejar que todas los thumbnail se vean por igual.

    Saludos

  8. Alex

    Muy buen tuto… funciona de mil maravillas!!!!

  9. hann

    bacan este foro

  10. Chiquito

    Skywalker!! GRANDE!!! no me funcaban las imágenes, tu aporte fué definitor
    Muchas gracias!!!

Los comentarios de este post están cerrados. Si quieres seguir la discusión, debatir, criticar, sugerir o expandir el tema te invitamos a hacerlo en tu propio blog, en twitter o donde puedas publicar. No olvides enlazar a este post para que sigamos la conversación y se genere un trackback.