Biblioteca grfica GD - Manual completo

1 de 6

http://www.desarrolloweb.com/manuales/16/imprimir.php

Biblioteca grfica GD
Manual por: DesarrolloWeb.com
"Tu mejor ayuda para aprender a hacer webs"

Versin on-line:
http://www.desarrolloweb.com/manuales/16

Creacin de imgenes dinmicas con PHP I

Una de las peculiaridades que PHP nos presenta con respecto a otros lenguajes dinmicos es la
utilizacin de la llamada biblioteca GD. Esta biblioteca no es ms que un conjunto de funciones que
tienen como objeto la creacin de imgenes.
En efecto, crear imgenes por medio de un lenguaje de programacin puede resultar en un principio
ms complicado y tedioso que servirse de otras herramientas grficas mucho ms visuales y potentes
presentes en la totalidad de las aplicaciones de diseo grfico. Sin embargo, no todo van a ser
inconvenientes, ms bien todo lo contrario. Entre otras ventajas, el uso de un lenguaje dinmico para
la creacin de imgenes nos permite:
La creacin de botones dinmicos
Una de las principales aplicaciones de esta herramienta grfica es la posibilidad de crear grficos
"virtuales" que se generan dinmicamente en funcin de los parmetros que se indiquen al script
responsable de su creacin. De este modo podemos generar botones dinmicos en los que,
especificando el texto a mostrar, el script se encarga de crearlo debidamente combinado con una
imagen. Esto nos evita tener que crear cada uno de los botones de nuestro sitio con una
aplicacin de diseo grfico. Podemos, mediante una simple llamada al script generador del
botn, crearlos en el momento que los vamos a usar.
Tratamiento automatizado de imgenes recibidas de los usuarios
Supongamos que disponemos de un sitio en el que recibimos fotos o grficos y estos han de ser
redimensionados y duplicados en distintos tamaos (un tamao real y un thumbnail por
ejemplo).Podramos disponer de unos scripts sencillos y de rpida creacin que permitiran tratar
las imgenes, duplicarlas y almacenarlas en bases de datos rpida y eficazmente.
La actualizacin y personalizacin ms flexible
Crear grficos por programacin implica usar variables para definir colores o tipos y tamaos de
letra. Esto quiere decir que, llegado el momento, podemos cambiar el aspecto de multitud de
imgenes creadas con un mismo script tan slo modificando unos pocos parmetros de ste. Esto
nos ahorrara muchas horas de trabajo el da en el que decidamos dar un cambio de diseo a la
pgina por ejemplo. Por otra parte, ponemos a disposicin del usuario un elemento adicional de
interaccin dado que esta parametrizacion puede ser llevada a cabo por l mismo y guardada
como cookies en su disco duro.
El ahorro en memoria
Si bien es posible crear archivos con estas herramientas, tambin es posible crear las imgenes
de una forma temporal lo cual nos permite economizar memoria. Este elemento puede ser
interesante en casos en los que tenemos un espacio de alojamiento limitado o bien si las
imgenes que mostramos en el sitio son numerosas y se muestran pocas veces. Sin embargo,
tambin tiene el efecto de resultar ms lento puesto que la imagen ha de ser creada antes de ser
mostrada lo cual requiere un tiempo de procesamiento suplementario.

03/05/2006 10:04 a.m.

Biblioteca grfica GD - Manual completo

2 de 6

http://www.desarrolloweb.com/manuales/16/imprimir.php

Como puede verse, en determinadas situaciones, el uso de la biblioteca GD puede revelarse como una
herramienta muy valiosa para el desarrollo de nuestro sitio.

Creacin de imgenes dinmicas con PHP II

La biblioteca GD no es reconocida directamente por nuestro PHP instalado por defecto. Cualquier
intento de ejecucin de un script que emplee este tipo de funciones dar inevitablemente un error a
menos que nos hayamos encargado de instalar el mdulo correspondiente.
En el caso de un servidor Apache funcionando bajo Linux, podemos activar el mdulo en configure
mediante la funcin -with-gd[=path]. Donde path resulta ser el camino donde se aloja el archivo de la
librera. Para una descripcin pormenorizada visita este enlace.
Los usuarios de Windows han de instalar el archivo php_gd.dll y activar el mdulo de la biblioteca en el
archivo de configuracin php.ini (localizado por regla general en el directorio C:\Windows). Para activar
el mdulo nada ms sencillo que seguir los pasos siguientes:
1.-Abrir con un editor de texto el archivo php.ini.
2.-Localizar en el cdigo del archivo la lnea: ;extension=php_gd.dll
3.-Borrar el punto y coma ; que juega el papel de comentario
4.-Localizar la seccin Paths and Directories y en la lnea extension_dir= introducir el camino fsico en
el que hemos albergado el archivo php_gd.dll. Ej. extension_dir=C:\Archivos de programa\PHP\
Llevados a cabo estos pasos, PHP est en situacin de reconocer cualquier llamada a una funcin de la
biblioteca GD. Esta biblioteca freeware de la compaa americana Boutell presenta en sus versiones
ms actuales (en el momento de redaccin de este artculo la 2.0.1. beta) una importante variante con
respecto a sus predecesoras: no tiene en cuenta el formato GIF. En efecto, como suele pasar con todo
aquello que tiene xito, el GIF deja de ser gratis y para ser utilizado en aplicaciones ha de pagarse una
licencia. Es por ello que la biblioteca GD incluye el formato PNG como alternativa lo cual resulta a todas
luces indiferente para nuestros propsitos salvo por el hecho de que actualmente el formato PNG no es
reconocido por la totalidad de los navegadores. Este inconveniente es actualmente solventado por la
mayora de los programadores utilizando versiones antiguas de la biblioteca que siguen circulando por
la red.

Creacin de imgenes dinmicas con PHP III

Pasemos a continuacin a describir algunas de las funciones ms comnmente utilizadas comenzando
por aquellas que no tienen un verdadero propsito grafico sino ms bien "administrativo". Para obtener
ms informacin sobre estas u otras funciones grficas pasaos, como no, por la pgina oficial de PHP.
Funciones de creacin y almacenamiento en archivos
Funcin
imagecreate

Descripcin
Crea una imagen de dimensiones dadas

Sintaxis
$im = imagecreate($x,$y)

Crea una imagen que tiene como fondo un $im =

imagecreatefromgif
archivo GIF definido
imagecreatefromgif($archivo)
imagecreatefrompng

Crea una imagen que tiene como fondo un $im =

archivo PNG definido
imagecreatefrompng($archivo)

imagecreatefromjpeg

Crea una imagen que tiene como fondo un $im =

archivo JPEG definido
imagecreatefromjpeg($archivo)

03/05/2006 10:04 a.m.

Biblioteca grfica GD - Manual completo

3 de 6

http://www.desarrolloweb.com/manuales/16/imprimir.php

Muestra la imagen creada en el navegador

$im = imagegif($im[,$archivo])
y la guarda como un archivo .gif si se
especifica

imagegif

imagepng

Muestra la imagen creada en el navegador

$im = imagepng($im[,$archivo])
y la guarda como un archivo.png si se
especifica

imagejpeg

Muestra la imagen creada en el navegador

$im = imagejpeg($im[,$archivo])
y la guarda como un archivo.jpg si se
especifica

imagedestroy

Libera la memoria ocupada por la imagen

Imagedestroy($im)

A notar que los archivos no tienen por qu ser almacenados como tales. Pueden ser directamente
mostrados sin que para ello hayamos ocupado espacio en el disco duro. Para ello tan slo hay que
omitir la variable $nombre (entre corchetes).
Por otra parte, no todas las versiones de bibliotecas GD soportan todos los formatos. De hecho, es
complicado hacerse con una misma versin que acepte las tres a la vez.
Funciones informativas
Funcin
getimagesize

Descripcin

Sintaxis

Genera un array con las ($arr) informaciones de la

$arr = getimagesize
imagen: Anchura, altura, formato (1 = GIF, 2 =
($filename)
JPG, 3 = PNG), cadena "height=altura
width=anchura" del codigo HTML

imagesx

Devuelve la anchura de la imagen $im

$ancho = imagesx($im)

imagesy

Devuelve la altura de la imagen $im

$alto= imagesy($im)

imagecolorstotal Devuelve el nmero total de colores empleados

imagettfbbox

Nos da un array con las coordenadas de las

esquinas de un cuadro imaginario que rodea
nuestro texto de fuente tipo True Type

$total = imagecolorstotal($im)
$arr = imagettfbbox($talla,
$angulo, $archivo_fuente,
$texto)

Getimagesize puede resultar muy til para scripts de tratamiento automtico de imgenes. Por otro
lado, imagettfbbox resulta ser muy prctico para el centrado y posicionamiento de textos al mismo
tiempo que puede servirnos en botones dinmicos para definir el tamao de la imagen en funcin del
tamao del texto que vayamos a introducir.
Funciones grficas
Funcin
imagecolorallocate
imagecolorat

Descripcin
Define un color en escala RGB

Sintaxis
$rojo = imagecolorallocate ($im,
255, 0, 0)

Define el color a partir del color presente $color = imagecolorat ($im, $x,
en un punto $x, $y
$y)

Define un color $col de la paleta como

imagecolortransparent transparente y le asigna un nuevo
identificador $col_trans

$col_trans =
imagecolortransparent ($im, $col)

imagearc

Traza un arco o elipse de centro $x, $y,

de ejes horizontal y vertical de $h y $v
respectivamente, ngulos inicial y final
de $i y $f y color $col

imagearc($im, $x, $y, $h , $v, $i,

$f, $col)

imageline

Traza una lnea definida por dos puntos

imageline($im, $x1, $y1, $x2,

$y2)

03/05/2006 10:04 a.m.

Biblioteca grfica GD - Manual completo

4 de 6

imagepolygon

imagefilledpolygon
imagerectangle

http://www.desarrolloweb.com/manuales/16/imprimir.php

Traza un polgono de $n puntos cuyas

coordenadas son definidas por el array
$coord

Dibuja un polgono coloreado de $n

imagefilledpolygon($im, $coord.,
puntos definidos como coordenadas en el
$n, $col)
array $coord
Traza un rectngulo definido por las
imagerectangle($im, $x1, $y1,
coordenadas de dos esquinas diagonales $x2, $y2, $col)

Dibuja un rectngulo coloreado definido

imagefilledrectangle por las coordenadas de dos esquinas
diagonales
imagesetpixel

imagepolygon($im, $coord., $n,

$col)

imagefilledrectangle($im, $x1,
$y1, $x2, $y2, $col)

Dibuja un pxel de color $col

imagesetpixel ($im, $x, $y, $col)

Copia una superficie de una imagen

origen $im_or y lo pega en una imagen
destino $im_de. La imagen es tomada en
forma de rectngulo de anchura $a y
altura $h a partir de la esquina ($x, $y) y
es pegada del mismo modo en su
destino.

Imagecopyresized($im_de,
$im_or, $x_de, $y_de, $x_or,
$y_or, $a_de, $h_de, $a_or,
$h_or)

Colorea una superficie con color $col

imagefill ($im, $x, $y, $col)

imagefilltoborder

Colorea una superficie definida por un

color $col1 con un color $col2

imagefilltoborder ($im, $x, $y,

$col1, $col2)

imagestring

Escribe un texto $texto con una fuente

de tamao $talla

imagestring ($im, $talla, $x, $y,

$texto, $col)

imagettftext

Escribe un texto $texto de talla $talla con

imagettftext ($im, $talla, $angulo,
una fuente True Type cuyo nombre de
$x, $y, $col, $file, $texto)
archivo es $file con un ngulo $angulo

imagecopyresized

imagefill

Como ya hemos dicho, esta lista no pretende ser exhaustiva sino ms bien mostrar las posibilidades
que esta biblioteca nos ofrece a la vez que nos sirve para tener las funciones ms importantes
resumidas al alcance de la mano.

Creacin de imgenes dinmicas con PHP IV

El ejemplo ms clsico de programacin con funciones GD es la creacin de un botn dinmico. Un
botn dinmico no es ms que un enlace grfico en el que la imagen contiene un texto, que nosotros
definimos, adornado con cualquier otro elemento esttico.
Aqu os presentamos el script para comentarlo a continuacin:
<?
//Calculamos las dimensiones del boton en funcion del tamano del texto
//la variable $mensaje es recibida por POST o GET
$cuadro = imagettfbbox (6,0,"fuente.TTF",$mensaje);
$ancho = $cuadro[2]-$cuadro[0]+15;
$im = imagecreate($ancho,15);
//Generamos la paleta
$rojo = imagecolorallocate($im,255,0,0);
$verde = imagecolorallocate($im,192,200,95);
$oscuro = imagecolorallocate($im,33,57,41);
$blanco = imagecolorallocate($im,255,255,255);
$transparente = imagecolortransparent ($im, $blanco);
imagefill($im,0,0,$transparente);

03/05/2006 10:04 a.m.

Biblioteca grfica GD - Manual completo

5 de 6

http://www.desarrolloweb.com/manuales/16/imprimir.php

//Generamos los arcos laterales

imagearc($im,7,7,12,12,90,150,$rojo);
imagearc($im,7,7,12,12,210,270,$rojo);
imagearc($im,7,7,11,11,90,150,$rojo);
imagearc($im,7,7,11,11,210,270,$rojo);
imagearc($im,$ancho-7,7,12,12,270,330,$rojo);
imagearc($im,$ancho-7,7,12,12,30,90,$rojo);
imagearc($im,$ancho-7,7,11,11,270,330,$rojo);
imagearc($im,$ancho-7,7,11,11,30,90,$rojo);
//Generamos las lineas rojas
imagerectangle($im,7,1,$ancho/2-3,2,$rojo);
imagerectangle($im,7,12,$ancho/2-3,13,$rojo);
imagerectangle($im,$ancho/2+3,1,$ancho-7,2,$rojo);
imagerectangle($im,$ancho/2+3,12,$ancho-7,13,$rojo);
//Generamos los rectangulos de los cuadrantes
imagefilledrectangle($im,$ancho/2-1,0,$ancho/2+1,3,$oscuro);
imagefilledrectangle($im,$ancho/2-1,11,$ancho/2+1,14,$oscuro);
imagefilledrectangle($im,0,6,3,8,$oscuro);
imagefilledrectangle($im,$ancho-4,6,$ancho-1,8,$oscuro);
//Sacamos el texto
imagettftext($im,6,0,8,9,$oscuro,"fuente.TTF",$mensaje);
//Mostramos el grafico en pantalla
imagepng($im);
//Liberamos memoria
imagedestroy($im);
?>
Como puede verse la programacin no resulta en absoluto complicada. El punto que reviste un poco
ms de atencin es la definicin de las coordenadas de cada figura trazada en funcin de las
dimensiones del texto.
La primera operacin antes siquiera de crear la imagen es evaluar el tamao del texto que vamos a
colocar de manera a ajustar el ancho del grfico que ser funcin obviamente de la longitud del
mensaje. Este clculo se realiza con la funcin imagettfbbox que nos proporcionar un array de ocho
elementos correspondientes a las coordenadas de las cuatro esquinas de un rectngulo imaginario que
engloba dicho texto. Teniendo en cuenta las coordenadas x de una esquina de la izquierda y otra de la
derecha obtenemos el ancho del texto al que sumaremos unos pxeles para poder dibujar su entorno.
Una vez definido el ancho, podemos crear la imagen y a continuacin definir los colores. Los colores
son definidos en escala RGB lo cual quiere decir que tenemos que hacer nuestras mezclas de rojo,
verde y azul expresando la contribucin de cada uno de estos colores a partir de un nmero que oscila
entre 1 y 255. As, por ejemplo, el rojo seria 255,0,0 y el negro se definira como un 0,0,0. Una forma
sencilla de definir estos colores sin complicarse mucho la vida es recurrir a un programa de diseo
grafico (Photoshop por ejemplo) donde podris encontrar fcilmente una paleta de colores que est
expresada de esta forma.
A notar que, para que el dibujo pueda ser mostrado sobre cualquier color de fondo que no sea blanco,
definimos el color blanco como transparente por medio de la funcin imagecolortransparent.
A continuacin pasamos a generar el entorno donde emplazaremos el texto. Unos cuantos arcos y
rectngulos nos darn el efecto deseado. El punto ms delicado es, como hemos dicho, definir las

03/05/2006 10:04 a.m.

Biblioteca grfica GD - Manual completo

6 de 6

http://www.desarrolloweb.com/manuales/16/imprimir.php

coordenadas de estas figuras a partir de la variable $ancho que nos define el tamao del grfico.
Con nuestro esqueleto creado ya slo nos queda introducir el texto, mostrar el dibujo y liberar la
memoria empleada para su creacin. Por supuesto, junto a este script, es necesario incluir el archivo
.TTF correspondiente al tipo de letra que empleamos.

Autores del manual:

Hay que agradecer a diversas personas la dedicacin prestada para la creacin de este manual. Sus
nombres junto con el nmero de artculos redactados por cada uno son los siguientes:
Rubn Alvarez

(4 captulos)

Todos los derechos de reproduccin y difusin reservados a Guiarte Multimedia S.L.

Volver

03/05/2006 10:04 a.m.