Biblioteca gráfica GD

Aprende a generar imágenes dinámicas con esta biblioteca de funciones. Da vida a tus scripts de una forma sencilla y cómoda.

1.- Creación de imágenes dinámicas con PHP I Presentamos esta tecnología propia de PHP y proponemos ejemplos de su utilidad. Entrar

2.- Creación de imágenes dinámicas con PHP II Describimos paso a paso todo lo necesario para hacer cargo a PHP de la biblioteca GD. Entrar

3.- Creación de imágenes dinámicas con PHP III Presentamos las funciones más relevantes que nos ofrece la biblioteca gráfica GD. Entrar

4.- Creación de imágenes dinámicas con PHP IV Aprende a utilizar la biblioteca GD programando un botón dinámico. Entrar

Creación de imágenes dinámicas con PHP I

Una de las peculiaridades que PHP nos presenta con respecto a otros lenguajes dinámicos es la utilización de la llamada biblioteca GD. Esta biblioteca no es más que un conjunto de funciones que tienen como objeto la creación de imágenes.

En efecto, crear imágenes por medio de un lenguaje de programación puede resultar en un principio más complicado y tedioso que servirse de otras herramientas gráficas mucho más visuales y potentes presentes en la totalidad de las aplicaciones de diseño gráfico. Sin embargo, no todo van a ser inconvenientes, más bien todo lo contrario. Entre otras ventajas, el uso de un lenguaje dinámico para la creación de imágenes nos permite:

La creación de botones dinámicos

Una de las principales aplicaciones de esta herramienta gráfica es la posibilidad de crear gráficos "virtuales" que se generan dinámicamente en función de los parámetros que se indiquen al script responsable de su creación. De este modo podemos generar botones dinámicos 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 aplicación de diseño gráfico. Podemos, mediante una simple llamada al script generador del botón, crearlos en el momento que los vamos a usar.

Tratamiento automatizado de imágenes recibidas de los usuarios

Supongamos que disponemos de un sitio en el que recibimos fotos o gráficos y estos han de ser redimensionados y duplicados en distintos tamaños (un tamaño real y un thumbnail por ejemplo).Podríamos disponer de unos scripts sencillos y de rápida creación que permitirían tratar las imágenes, duplicarlas y almacenarlas en bases de datos rápida y eficazmente.

La actualización y personalización más flexible

Crear gráficos por programación implica usar variables para definir colores o

tipos y tamaños de letra. Esto quiere decir que, llegado el momento, podemos cambiar el aspecto de multitud de imágenes creadas con un mismo script tan sólo modificando unos pocos parámetros de éste. Esto nos ahorraría muchas horas de trabajo el día en el que decidamos dar un cambio de diseño a la página por ejemplo. Por otra parte, ponemos a disposición del usuario un elemento adicional de interacción 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, también es posible crear las imágenes 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 imágenes que mostramos en el sitio son numerosas y se muestran pocas veces. Sin embargo, también tiene el efecto de resultar más lento puesto que la imagen ha de ser creada antes de ser mostrada lo cual requiere un tiempo de procesamiento suplementario.

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.

Creación de imágenes dinámicas con PHP II

La biblioteca GD no es reconocida directamente por nuestro PHP instalado por defecto. Cualquier intento de ejecución de un script que emplee este tipo de funciones dará inevitablemente un error a menos que nos hayamos encargado de instalar el módulo correspondiente.

En el caso de un servidor Apache funcionando bajo Linux, podemos activar el módulo en configure mediante la función -with-gd[=path]. Donde path resulta ser el camino donde se aloja el archivo de la librería. Para una descripción pormenorizada visita este enlace.

Los usuarios de Windows han de instalar el archivo php_gd.dll y activar el módulo de la biblioteca en el archivo de configuración php.ini (localizado por regla general en el directorio C:\Windows). Para activar el módulo nada más sencillo que seguir los pasos siguientes:

1.-Abrir con un editor de texto el archivo php.ini.

2.-Localizar en el código del archivo la línea: ;extension=php_gd.dll

3.-Borrar el punto y coma ; que juega el papel de comentario

4.-Localizar la sección Paths and Directories y en la línea extension_dir= introducir el camino físico 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 situación de reconocer cualquier llamada a una función de la biblioteca GD. Esta biblioteca freeware de la compañía americana Boutell presenta en sus versiones más actuales (en el momento de redacción de este artículo 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 propósitos 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 mayoría de los programadores utilizando versiones antiguas de la biblioteca que siguen circulando por la red.

Creación de imágenes dinámicas con PHP III

Pasemos a continuación a describir algunas de las funciones más comúnmente utilizadas comenzando por aquellas que no tienen un verdadero propósito grafico sino más bien "administrativo". Para obtener más información sobre estas u otras funciones gráficas pasaos, como no, por la página oficial de PHP.

Funciones de creación y almacenamiento en archivos

Función Descripción Sintaxis

imagecreate Crea una imagen de dimensiones dadas $im = imagecreate($x,$y)

imagecreatefromgif Crea una imagen que tiene como fondo un archivo GIF definido

$im = imagecreatefromgif($archivo)

imagecreatefrompng Crea una imagen que tiene como fondo un archivo PNG definido

$im = imagecreatefrompng($archivo)

imagecreatefromjpeg

Crea una imagen que tiene como fondo un archivo JPEG definido

$im = imagecreatefromjpeg($archivo)

imagegifMuestra la imagen creada en el navegador y la guarda como un archivo .gif si se especifica

$im = imagegif($im[,$archivo])

imagepngMuestra la imagen creada en el navegador y la guarda como un archivo.png si se especifica

$im = imagepng($im[,$archivo])

imagejpegMuestra la imagen creada en el navegador y la guarda como un archivo.jpg si se especifica

$im = imagejpeg($im[,$archivo])

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 sólo 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 versión que acepte las tres a la vez.

Funciones informativas

Función Descripción Sintaxis

getimagesize

Genera un array con las ($arr) informaciones de la imagen: Anchura, altura, formato (1 = GIF, 2 = JPG, 3 = PNG), cadena "height=altura width=anchura" del codigo HTML

$arr = getimagesize ($filename)

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 número total de colores empleados $total = imagecolorstotal($im)

imagettfbboxNos da un array con las coordenadas de las esquinas de un cuadro imaginario que rodea nuestro texto de fuente tipo True Type

$arr = imagettfbbox($talla, $angulo, $archivo_fuente, $texto)

Getimagesize puede resultar muy útil para scripts de tratamiento automático de imágenes. Por otro lado, imagettfbbox resulta ser muy práctico para el centrado y posicionamiento de textos al mismo tiempo que puede servirnos en botones dinámicos para definir el tamaño de la imagen en función del tamaño del texto que vayamos a introducir.

Funciones gráficas

Función Descripción Sintaxis

imagecolorallocate Define un color en escala RGB $rojo = imagecolorallocate ($im, 255, 0, 0)

imagecolorat Define el color a partir del color presente en un punto $x, $y

$color = imagecolorat ($im, $x, $y)

imagecolortransparent

Define un color $col de la paleta como 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 línea definida por dos puntos imageline($im, $x1, $y1, $x2, $y2)

imagepolygonTraza un polígono de $n puntos cuyas coordenadas son definidas por el array $coord

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

imagefilledpolygonDibuja un polígono coloreado de $n puntos definidos como coordenadas en el array $coord

imagefilledpolygon($im, $coord., $n, $col)

imagerectangle Traza un rectángulo definido por las coordenadas de dos esquinas diagonales

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

imagefilledrectangleDibuja un rectángulo coloreado definido por las coordenadas de dos esquinas diagonales

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

imagesetpixel Dibuja un píxel de color $col imagesetpixel ($im, $x, $y, $col)

imagecopyresized

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 rectángulo 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)

imagefill 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 tamaño $talla

imagestring ($im, $talla, $x, $y, $texto, $col)

imagettftextEscribe un texto $texto de talla $talla con una fuente True Type cuyo nombre de archivo es $file con un ángulo $angulo

imagettftext ($im, $talla, $angulo, $x, $y, $col, $file, $texto)

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

Creación de imágenes dinámicas con PHP IV

El ejemplo más clásico de programación con funciones GD es la creación de un botón dinámico. Un botón dinámico no es más que un enlace gráfico en el que la imagen contiene un texto, que nosotros definimos, adornado con cualquier otro elemento estético.

Aquí os presentamos el script para comentarlo a continuación:

<?//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);

//Generamos los arcos lateralesimagearc($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 rojasimagerectangle($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 cuadrantesimagefilledrectangle($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 textoimagettftext($im,6,0,8,9,$oscuro,"fuente.TTF",$mensaje);

//Mostramos el grafico en pantallaimagepng($im);

//Liberamos memoriaimagedestroy($im);?>

Como puede verse la programación no resulta en absoluto complicada. El punto que reviste un poco más de atención es la definición de las coordenadas de cada figura trazada en función de las dimensiones del texto.

La primera operación antes siquiera de crear la imagen es evaluar el tamaño del texto que vamos a colocar de manera a ajustar el ancho del gráfico que será función obviamente de la longitud del mensaje. Este cálculo se realiza con la función imagettfbbox que nos proporcionará un array de ocho elementos correspondientes a las coordenadas de las cuatro esquinas de un rectángulo 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 píxeles para poder dibujar su entorno.

Una vez definido el ancho, podemos crear la imagen y a continuación 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 contribución de cada uno de estos colores a partir de un número que oscila entre 1 y 255. Así, por ejemplo, el rojo seria 255,0,0 y el negro se definiría como un 0,0,0. Una forma sencilla de definir estos colores sin complicarse mucho la vida es recurrir a un programa de diseño grafico (Photoshop por ejemplo) donde podréis encontrar

fácilmente 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 función imagecolortransparent.

A continuación pasamos a generar el entorno donde emplazaremos el texto. Unos cuantos arcos y rectángulos nos darán el efecto deseado. El punto más delicado es, como hemos dicho, definir las coordenadas de estas figuras a partir de la variable $ancho que nos define el tamaño del gráfico.

Con nuestro esqueleto creado ya sólo nos queda introducir el texto, mostrar el dibujo y liberar la memoria empleada para su creación. Por supuesto, junto a este script, es necesario incluir el archivo .TTF correspondiente al tipo de letra que empleamos.