Generar gráficos utilizando la librería GD

Es posible que no todos lo sepan, pero tal como una p�gina HTML puede ser generada din�micamente por PHP, lo mismo se puede hacer con un archivo de cualquier formato. En lugar de colocar etiquetas que corresponden a dibujos en el c�digo HTML con rutas de acceso a archivos gr�ficos en el servidor, de manera similar podemos colocar la ruta a un script PHP que generar� los datos que corresponden al dibujo en un formato dado. Esto no ser� una gran diferencia para el navegador.

De ah� que los cuadros ser�n generados din�micamente por el script PHP, y de la visualizaci�n se encarga el navegador de Internet. Si deseamos incluir los gr�ficos en la p�gina HTML (la que desde luego puede ser generada por PHP), el elemento IMG va a poseer en el atributo SRC la ruta al script que genera el gr�fico. En la ruta se pueden definir variables de las que dependa la imagen a desplegar

Listado 1: Colocaci�n din�mica de imagen generada en el c�digo HTML
<HTML>
<BODY>
<IMG SRC="image.php?
     caption=Caption"
     width="400" height="300"
     border="0">
</BODY>
</HTML>

GD posibilita la creaci�n de la imagen con una resoluci�n dada de antemano: la funci�n imagecreate(); tambi�n permite cargar un formato definido a partir de la imagen de un archivo (dependiendo del formato del archivo gr�fico) con la funci�n correspondiente, por ejemplo, imagecreatefromjpeg(), imagecreatefrompng(). Los formatos disponibles de los dibujos dependen de la versi�n de la librer�a GD y de PHP.

Para empezar, presentaremos varias funciones elementales. Cargaremos una imagen del archivo, despu�s dibujaremos en ella algunos elementos gr�ficos. Utilizando la funci�n para dibujar l�neas imageline(), colocaremos una l�nea asign�ndole un grosor con la funci�n imagesetthickness(). Adem�s, en la imagen podemos colocar un texto con imagestring(). Existen varias funciones para escribir textos, responden de la utilizaci�n de varios formatos de fuentes.

Para que la imagen sea visualizada correctamente definimos un encabezado adecuado al formato de la imagen generada, por ejemplo, header("Content-type: image/png"). En caso del sistema operativo Linux, los tipos de archivos correspondientes podemos encontrarlos a menudo en el archivo /etc/mime.types.

Si hemos escrito el script sin errores, la imagen deber�a aparecer en la ventana del navegador al introducir la direcci�n URL del script. Es importante que el script devuelva al navegador s�lamente lo que gener�, en nuestro caso, la funci�n imagepng(). Merece la pena poner �nfasis en que las etiquetas <?php y ?> sean colocadas al inicio y al final del script y que aparte de ellas no haya ning�n otro car�cter (caracteres del fin de l�nea o espacios en blanco). En otro caso, el navegador recibir�a datos adicionales por lo que el formato podr�a no ser interpretado correctamente.

En la Figura 1 se puede apreciar el efecto del funcionamiento del script, cuyo c�digo se encuentra en el Listado 2.

Figura 1: Imagen modificada  � Listado 2
Listado 2: Inscripci�n y Figura sobre la imagen creada con ayuda de GD - archivo image.php
<?php
//cargamos la imagen desde un archivo jpg
$image = imagecreatefromjpeg('images/civic_full.jpg');
//asignamos los colores que utilizaremos despu�s
$white = ImageColorAllocate($image, 255, 255, 255);
$black = ImageColorAllocate($image, 0, 0, 0);
$red = ImageColorAllocate($image, 255, 0, 0);
//definimos el texto de la inscripci�n de la imagen
if($_GET['caption']) {
    $caption = $_GET['caption'];
} else
{
    $caption = "civic";
}
//leemos el tama�o de la imagen
$width = imagesx($image); $height = imagesy($image);
//a lo ancho de la imagen dibujamos una l�nea horizontal
imageline($image, 0, $height/2, $width, $height/2, $red);
$count = 10;
//bucle responsable de dibujar cuadr�ngulos
for($i=1; $i<$count; $i++) {
    //tabla de coordenadas de los v�rtices (x0, y0, x1, y1, ...)
    $points = Array(
      round($width*(1-$i/$count)/2), round($height*(1-$i/$count)/2),
      round($width*(1-$i/$count)/2), round($height*(1+$i/$count)/2),
      round($width*(1+$i/$count)/2), round($height*(1+$i/$count)/2),
      round($width*(1+$i/$count)/2), round($height*(1-$i/$count)/2),
    );
    //dibujamos un pol�gono con base en coordenadas de los puntos en la tabla
    imagepolygon($image, $points, sizeof($points)/2, $black);
}
//colocamos el texto en la parte central de la imagen
imagestring($image, 10, $width/2, $height/2, $caption, $white);
//definimos el encabezado de acuerdo con el tipo de datos de salida
header("Content-type: image/png");
//generamos la imagen
imagepng($image);
//liberamos la memoria ocupada por la imagen
imagedestroy($image);
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP