CLIENTES WEB

Librera GDLibrary

GD LIBRARY
PHP no permite nicamente generar contenidos HTML o leer/escribir archivos de texto plano,
tiene la capacidad de manipular formatos de imgenes y modificarlas para generar nuevos
archivos, o lo que es an ms prctico: Mandar esas imgenes directo al navegador sin generar
un archivo fsico.
Para eso usa la librera GD (Graphics Draw) que en la mayora de los servidores web viene
instalada por defecto.
Entre la lista de funcionalidades que podemos destacar de la librera podemos mencionar:

Redimensionar los tamaos de una imagen.

Hacer un croppeo (generar una nueva imagen pero en base a un rea del original).
Superponer a una imagen una marca de agua.
Cambiar la tonalidad de una imagen (escala de grises, sepia, etc.).
Crear grficos de barra o de torta.

Puntualmente orientado al desarrollo web, veamos como esta librera nos permite modificar el
tamao de una imagen.

REDIMENSIONAR IMGENES
Si hay algo que hemos aprendido desde hace un tiempo, es que modificar los valores del
WIDTH y HEIGHT de una imagen (ya sea desde CSS o desde los atributos HTML) no es un
sinnimo de optimizacin.
La imagen sigue midiendo y pesando su tamao original. Si es una foto de 2Mb de 4000px de
ancho por 3000px de alto, mostrarla al tamao de 400px por 300px no har que pese menos
de 2Mb.
La solucin es tan simple como abrir un programa de retoque digital y guardar una nueva
imagen con el tamao deseado para usarla en el sitio web.
El problema se plantea cuando el sistema que hemos desarrollado ya no est en nuestras
manos y el cliente (o el administrador del sitio que hemos vendido) debe subir una imagen.
Si no se trata de una persona experimentada en el manejo de software o no le interesa
adentrarse en la tarea, puede producir un caos en la optimizacin y quizs en el layout del sitio.
La solucin radica en manipular toda imagen subida al servidor con la librera GD.
Si bien el cdigo a primera vista puede parecer un tanto complejo, hay un algoritmo bastante
simple detrs de esta tarea:
1. Abrir la imagen original (OJO GD tiene un funcin distinta por cada formato).
2. Crear un lienzo vaco del tamao deseado (si se quiere hacer proporcional deber
obtenerse con una regla de 3 simple).
3. Copiar un fragmento de la foto original en el rea que ocupar en la foto destino.

Prof. Germn Rodrguez grodriguez@escueladavinci.net

CLIENTES WEB
Librera GDLibrary

PREPARANDO LAS IMGENES

Como se anticip en este documento, la librera GD reconoce los distintos formatos de imagen
de uso frecuente (JPEG, GIF, BMP, PNG) y posee una funcin distinta para abrir cada formato.
Las imgenes se abren con las funciones imagecreatefromXXX, donde XXX es el formato grfico
que queremos abrir. Estas funciones reciben como argumento una cadena de texto con la ruta
para llegar al archivo deseado (s, puede ser directamente un tmp_name de array $_FILES).
Esta apertura de imagen debe guardarse en una variable para luego acceder al contenido a
copiar o manipular.

//apertura de un JPG, OJO el nombre del formato es JPEG

$foto1 = imagecreatefromjpeg( 'carpeta/archivo.jpg' );
//apertura de un PNG
$foto2 = imagecreatefrompng( 'carpeta/archivo.png' );
//apertura de un BMP, OJO el formato es WBMP (Windows-bmp)
$foto3 = imagecreatefromwbmp( 'carpeta/archivo.bmp' );
//apertura de un GIF
$foto4 = imagecreatefromgif( 'carpeta/archivo.gif' );
[nota: al hacer un UPLOAD de archivos, en el array de $_FILES tenemos el type, que nos ofrece el mime-type del
archivo subido y acorde al formato dir image/png image/jpeg etc.. ]

Si hacemos un var_dump de la variable donde hemos almacenado la apertura de la imagen

veremos que estamos trabajando con un recurso, seguido de un nmero de identificacin.
Es importante entender que GD no redimensiona el recurso original, sino que copia un rea a
un nuevo lienzo, as que debemos crear un objeto de GDLibrary.
Ac tenemos dos opciones:

Una crear un lienzo vaco con un lmite de 256 colores (arquitectura del formato GIF).
La otra crear un lienzo vaco de color verdadero (24 bits).

Las dos funciones reciben como argumento dos valores numricos que representarn el ancho y
alto del lienzo vaco respectivamente.

//lienzo vaco de 400x300, 256 colores

$new_gif = imagecreate( 400, 300 );
//lienzo vaco de 400x300, color verdadero
$new_jpg = imagecreatetruecolor( 400, 300 );

Prof. Germn Rodrguez grodriguez@escueladavinci.net

CLIENTES WEB
Librera GDLibrary
Claro est que la imagen nueva debe respetar una relacin de aspecto. Para eso, el lienzo
nuevo debe ser proporcional al original.
Tenemos imgenes 4:3 y 16:9, por lo cual no podemos garantizar que a una foto de 400
pixeles de ancho SIEMPRE le correspondern 300 pxeles de alto, eso sin contar que la imagen
puede ser vertical en lugar de horizontal.
Una simple ecuacin matemtica, nos resolver este problema. Pero para ello debemos tomar
conciencia que al menos una de las dos medidas debemos saberla de antemano (o todas las
fotos tienen el mismo ancho, o todas tienen el mismo alto).
Supongamos que estamos haciendo una galera horizontal donde todas las fotos van a tener el
mismo tamao de alto, y seteamos en una variable ese alto en 200 pxeles.
La regla de 3 simple nos dira que la ecuacin es la siguiente:

Alto_original ___________ Ancho_original

200 (alto_nuevo) ________ Ancho_nuevo = 200 x Ancho_original / Alto_original.

Para obtener los valores del alto y ancho original de una imagen, podemos usar las funciones
imagesx( ) e imagesy( ) que reciben como argumento la variable donde se guard la apertura de
la imagen original.

//abro el archivo obtenido por $_FILES, supongamos que el input tena el name foto
$original = imagecreatefromjpeg( $_FILES['foto']['tmp_name'] );
//obtengo ancho y alto del original.
$ancho_o = imagesx( $original ); //ancho
$alto_o = imagesy( $original ); //alto
//genero el ancho y alto de la copia
$alto_n = 200; //todas las fotos 200px de alto fijo
$ancho_n = round( 200 * $alto_o / $ancho_o); //round redondea si hay decimales
//ahora creo el lienzo vaco (la copia).
$copia = imagecreatetruecolor( $ancho_n , $alto_n );

HACIENDO LA COPIA
Una vez que tenemos el lienzo de destino creado, tenemos dos funciones para seleccionar un
rea del original y pegarlo en el destino: imagecopyresampled( ) e imagecopyresized( ).
Las dos hacen lo mismo y reciben la misma cantidad de argumentos (y en el mismo orden).
La nica diferencia entre ambas, radica en que imagecopyresampled( ), aplica un suavizado
sobre los pxeles mejorando las curvaturas y bordes, como se muestra a continuacin.

Prof. Germn Rodrguez grodriguez@escueladavinci.net

CLIENTES WEB
Librera GDLibrary

Los 10 argumentos de ambas funciones se detallan a continuacin:

1: Recurso destino donde se pegar la copia.

2: Recurso original del que se copiar la imagen.
3 y 4: Eje X,Y donde SE EMPIEZA a pegar en la copia (normalmente equina superior
izquierda, eje 0, 0).
5 y 6: Eje X,Y donde SE EMPIEZA a copiar en el original (salvo que hablemos de un
croppeo, tambin ser equina superior izquierda, eje 0, 0).
7 y 8: Eje X,Y donde SE TERMINA de pegar en la copia (normalmente ancho y alto de la
imagen nueva).
9 y 10: Eje X,Y donde SE TERMINA de copiar en el original (salvo que hablemos de un
croppeo, tambin ser el ancho y alto de la imagen original).

De esta manera el cdigo completo quedara as:

$original = imagecreatefromjpeg( $_FILES['foto']['tmp_name'] );

$ancho_o = imagesx( $original );
$alto_o = imagesy( $original );
$alto_n = 200;
$ancho_n = round( 200 * $alto_o / $ancho_o); //round redondea si hay decimales
$copia = imagecreatetruecolor( $ancho_n , $alto_n );
imagecopyresampled( $copia, $original, 0,0, 0,0, $ancho_n,$alto_n, $ancho_o,$alto_o);
Lo ltimo que nos queda es dar salida a los archivos generados.

SALIDA DE LA IMAGEN
El OUTPUT de una imagen se hace con las funciones imageXXX, donde XXX se reemplaza (al
igual que pasa con la apertura de un archivo) por el formato MIME que se quiere generar.

Prof. Germn Rodrguez grodriguez@escueladavinci.net

CLIENTES WEB
Librera GDLibrary
De esta manera tendremos:

imagejpeg( );
imagepng( );
imagegif( );
imagewbmp( );

Todas las funciones de OUTPUT reciben un argumento obligatorio: el recurso el exportar (en
este caso la copia) y dos argumentos optativos.
1. La funcin con un solo argumento, muestra la imagen en el documento. Pero para eso
hay que decirle al apache que este PHP es en realidad una imagen.
Eso se logra sobre-escribiendo el tipo de contenido en el header del archivo:

//muestro una imagen en JPEG

imagejpeg( $copia );
header("Content-type: image/jpeg");
2. El segundo argumento es un String que, si est presente, es el nombre de un archivo
FISICO que se va a generar en el servidor (en este caso ya no se usa el header).

//exporto un archivo en JPEG

imagejpeg( $copia, 'carpeta/nombre_foto.jpg' );

3. El tercer argumento es la calidad que tendr la imagen guardada, es un valor numrico

de 0 a 100, siendo 100 la mxima calidad posible.

//exporto un archivo en JPEG bajandole la calidad al 5%

imagejpeg( $copia, 'carpeta/nombre_foto.jpg', 5 );
//exporto un archivo en JPEG con la mxima calidad (100%)
imagejpeg( $copia, 'carpeta/nombre_foto.jpg', 100 );

Una vez que se mostr o export el archivo, debemos borrar los recursos del servidor, eso se
hace con la funcin imagedestroy( ).

imagedestroy( $copia );
imagedestroy( $original );

Prof. Germn Rodrguez grodriguez@escueladavinci.net