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

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.