Para crear una imagen podemos pensar en utilizar alguna aplicación como Photoshop o Gimp, sin embargo si la imagen que deseamos es dinámica o es un contenido que no podemos anticipar tenemos que buscar una alternativa. Es aquí donde entra PHP nos salva el día, gracias a su librería nativa GD, nos permite utilizar algunos métodos para crear imágenes, aunque el proceso no es complejo a mayor complejidad de la imagen, mayores cálculos y algoritmos debemos hacer.
Conceptos básicos
Antes de pasar a la parte práctica debemos empezar tomando nota de algunos conceptos que pueden facilitarnos el entendimiento de todo lo que representa una imagen o gráfico dentro del ecosistema de PHP.
Cuando hablamos de colores debemos saber que todas las composiciones las logramos con una paleta llamada RGB para rojo, verde y azul, entonces con códigos podemos obtener una mezcla de estos tres y conseguir virtualmente cualquier color visible para el ser humano.
Dibujando nuestra primera imagen
Ya aclarada la parte introductoria de la teoría vamos a pasar a la parte práctica. En este primer ejemplo vamos a realizar algo simple para luego ir aumentando el nivel, para ello vamos a dibujar un pequeño rectángulo de color negro, con ello demostraremos algunos de los conceptos ya aprendidos. Para lograr este ejemplo vamos a seguir los siguientes pasos:
1- Primero creamos nuestro archivo, lo llamaremos rectangulo_simple.php. Instanciamos método de imagecreate() esto para definir el receptor de nuestra imagen, además fijamos el ancho y el alto del mismo:
<?php $nuestraImagen = imagecreate(200, 200);
2- Acto seguido debemos definir los colores de la imagen, esto lo hacemos con el método imagecolorallocate(), veamos:
$blanco = imagecolorallocate($nuestraImagen, 0xFF, 0xFF, 0xFF); $negro = imagecolorallocate($nuestraImagen, 0x00, 0x00, 0x00);
3- Luego creamos nuestra imagen rectangular en el receptor declarado inicialmente, esto lo hacemos con el método imagefilledrectangle() y le pasamos el color del relleno:
imagefilledrectangle($nuestraImagen, 50, 50, 150, 150, $negro);
4- por último definimos las cabeceras o header para que el navegador pueda mostrar el contenido y le damos a la creación de nuestra imagen el formato PNG:
header("Content-Type: image/png"); imagepng($nuestraImagen);
Expliquemos más a fondo como funciona nuestro código, lo primero que hacemos es crear una especie de Canvas, este va a ser quien reciba los datos para nuestra imagen; luego a nuestro Canvas o receptor de imágenes le vamos a asignar un par de colores, en este caso negro y blanco, para ello utilizamos códigos hexadecimales en las tres posiciones correspondientes al RGB.
Ya para la parte final utilizamos un método que nos permite dibujar un rectángulo, le definimos sus tamaños y le decimos donde va a ser mostrado y que color va a utilizar para su relleno. Luego para poder mostrar la imagen definimos unas cabeceras para que el navegador sepa que va a recibir una imagen y por último con el método imagepng() hacemos que se imprima bajo el formato PNG.
Veamos como luce en nuestro navegador cuando ejecutamos nuestro ejemplo:
Imprimir un formato diferente
En caso que necesitemos un formato diferente como por ejemplo JPEG, no tenemos más que cambiar la cabecera que enviamos al navegador y luego utilizar un método diferente.
En este caso vamos a cambiar el ejemplo anterior para que sea JPEG y no PNG, para ello simplemente con modificar la parte final de nuestro código tendremos. Para ello seguimos los siguientes pasos:
1- Creamos un nuevo archivo llamado cambiar_formato_imagen.php y copiamos/pegamos el código del ejemplo anterior, luego buscamos esta sección del código:
header("Content-Type: image/png"); imagepng($nuestraImagen);
2- Habiendo localizado la sección sólo nos queda cambiar las líneas por lo siguiente, notando que cambiamos el método por igual:
header("Content-Type: image/jpeg"); imagejpeg($nuestraImagen);
Como vimos simplemente al cambiar esas dos últimas líneas podemos cambiar el formato de nuestra imagen. Es importante destacar que solo podemos utilizar un formato por archivo de muestra de imágenes.
Si queremos realizar un programa que genere diferentes formatos debemos guardar la imagen en un archivo y no mostrarla de esta manera sino incluyéndola en una página HTML.
Funciones de dibujo
Ya tuvimos un pequeño acercamiento a la librería GD con los ejemplos anteriores. Pero no es todo, esta librería nos permite utilizar una cantidad mayor de funciones para lograr dibujar, para ello veremos a continuación algunas de las más básicas y populares:
Ejemplo de rotación de una imagen
El método imagerotate() es un poco complejo de explicar si no lo vemos con nuestros ojos, es por ello que vamos a tomar el primer ejemplo que hicimos y vamos a modificarlo para que el rectángulo final sea rotado una cantidad de grados. Para ello veamos los pasos que debemos seguir:
1- Creamos un archivo llamado rectangulo_rotado.php y utilizamos como base nuestro código anterior hasta la creación de la imagen rectangular, veamos:
<?php $nuestraImagen = imagecreate(200, 200); $blanco = imagecolorallocate($nuestraImagen, 0xFF, 0xFF, 0xFF); $negro = imagecolorallocate($nuestraImagen, 0x00, 0x00, 0x00); imagefilledrectangle($nuestraImagen, 50, 50, 150, 150, $negro);
2- Ahora aplicamos el método imagerotate() para definir la rotación de nuestra imagen:
$nuevaImagenRotada = imagerotate($nuestraImagen, 65, 1);
3- Por último definimos nuestras cabeceras y creamos la imagen con el formato dado:
header("Content-Type: image/png"); imagepng($nuevaImagenRotada);
Como podemos ver todo sigue igual al primer ejemplo, sin embargo luego que creamos nuestro rectángulo y justo antes de generar nuestra cabecera hemos creado una nueva variable que se llama nuevaImagenRotada, a esta le vamos a asignar el resultado del método imagerotate(), el argumento 65 corresponde al ángulo de rotación de la imagen y el 1 es el contraste que va a tomar en nuestra pantalla. Finalmente vamos a utilizar esta nueva variable para generar la imagen. Veamos cómo luce cuando lo ejecutamos en nuestro navegador:
Dibujando texto
Dibujar palabras es algo muy útil, ya que esto nos permite generar un contenido que no es rastreable por funciones de búsqueda, ni por motores externos. Uno de los mayores usos que se le dan a este tipo de funciones es la creación de captchas que validan si el usuario es humano o no.
Para poder dibujar simplemente debemos utilizar la función imagestring(imagen, fuente, x, y, texto, color); esta recibe en qué imagen debe ser colocado el texto, el identificador de la fuente que va a utilizar, el eje X y el eje Y donde se va a ubicar, el texto a dibujar y por último el color del mismo.
Para lograr este efecto simplemente debemos agregar una línea antes de la generación de la cabecera para el navegador, veamos los pasos a seguir:
1- Creamos un archivo llamado dibujar_texto.php y utilizamos como base nuestro código del primer ejemplo hasta la creación de la imagen rectangular:
<?php $nuestraImagen = imagecreate(200, 200); $blanco = imagecolorallocate($nuestraImagen, 0xFF, 0xFF, 0xFF); $negro = imagecolorallocate($nuestraImagen, 0x00, 0x00, 0x00); imagefilledrectangle($nuestraImagen, 50, 50, 150, 150, $negro);
2- Aplicamos el método imagestring() para dibujar el texto:
imagestring($nuestraImagen, 5, 50, 160, "Un rectangulo", $negro);
3- Definimos las cabeceras y creamos la imagen:
header("Content-Type: image/png"); imagepng($nuestraImagen);
Como podemos ver solo tuvimos que cambiar unas cuantas líneas para darle un nuevo enfoque y utilidad a nuestro código, veamos como luce en nuestro navegador cuando ejecutamos nuestro ejemplo:
Con esto damos por finalizado nuestro tutorial, hemos conseguido dibujar algunas formas básicas y con ello crear buenos resultados, sin embargo esto es solo el punto de entrada, las aplicaciones de estos conocimientos son muy variadas pero con un poco de investigación podemos lograr cosas muy interesantes.