Hay momentos es los cuales no podemos utilizar una imagen ya hecha. Esto puede ocurrir por diversas causas, entre ellas derechos de autor pero quizás la principal es que no existe la imagen que deseamos y para resolver este problema lo primero que se nos viene a la mente tal vez es crearla nosotros mismos.
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.
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.
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:
2- Acto seguido debemos definir los colores de la imagen, esto lo hacemos con el método imagecolorallocate(), veamos:
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:
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:
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:
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:
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:
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.
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:
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:
2- Ahora aplicamos el método imagerotate() para definir la rotación de nuestra imagen:
3- Por último definimos nuestras cabeceras y creamos la imagen con el formato dado:
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:
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:
2- Aplicamos el método imagestring() para dibujar el texto:
3- Definimos las cabeceras y creamos la imagen:
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.
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.
Imagen
Una imagen no es más que un rectángulo relleno con píxeles de varios colores o de un solo color, estos están arreglados dentro del rectángulo de una forma tal que al verlos desde una distancia forman algo que podemos reconocer.
Formatos soportados
Las imágenes pueden poseer varios formatos, sin embargo estos se refieren al tipo de compresión que lleva esta, y la paleta o cantidad de colores que pueden ser mostrados en dicho formato elegido. Entre los formatos soportados por la librería GD de PHP tenemos, GIF, JPEG y PNG, donde GIF solamente soporta una paleta de 256 colores y PNG soporta más de 16 millones de colores, JPEG soporta únicamente en este caso hasta 16 millones de colores.
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:
imagesetpixel(imagen, x, y, color)
Esta función nos permite establecer el color de un pixel en particular, es la más básica de todas sin embargo si la combinamos con un buen algoritmo podemos lograr resultados muy impresionantes.
imageline(imagen, inicio_x, inicio_ y, fin_x, fin_ y, color)
Esta función nos permite dibujar una línea en la sección o parte de nuestro Canvas definida por los ejes X y Y del espacio que ocupa, donde Y le dará la altura y X le dará el largo a la misma.
imagepolygon(imagen, puntos, número, color)
Nos permite dibujar un polígono, siendo esta una de las funciones más utilizadas, ella toma como argumentos la imagen donde vamos a crear el polígono, un array con los puntos que conforman los lados del mismo, el número de puntos que debe unir y finalmente el color que va a tener.
imagerotate(image, angle, background_color)
Esta función nos permite rotar en su eje una cantidad de grados a las imágenes, con ello podremos lograr diferentes efectos sin necesidad de tener que pasar por procesadores de imágenes externos.
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.
