Creación de imágenes dinámicas

Una imagen dinámica es tan sólo un script que contiene las instrucciones para la creación de esa imagen. Para visualizar una imagen dinámica desde una página web basta con invocar el fichero que contiene el script desde la etiqueta clásica de inserción de imágenes de HTML

<img src="imgxx.php"> donde imgxx.php será el nombre del script que genera la imagen.

Primera etiqueta

Una vez conocidos los formatos que soporta nuestra versión, ya podemos generar imágenes utilizando cualquiera de esos formatos. Trabajaremos con dos de ellos: JPG y PNG.

La primera instrucción que ha de contener cualquier script que deba generar imágenes ha de ser la siguiente:

Creación de imágenes

Definida la etiqueta anterior tenemos que: crear la imagen, dibujarla y luego enviarla al navegador para que pueda ser visualizada y, por último, (no es imprescindible pero si muy conveniente) borrarla, con el fin de liberar la memoria del servidor ocupada durante el proceso de generación de la misma. Estas son las funciones PHP para esos procesos:

Con esta función se crea una imagen del tamaño indicado en los parámetros ancho y alto (en pixels) que será recogida en la variable $nombre. Esta función es idéntica para cualquier formato de imagen.

Envío de imágenes al navegador

Para enviar imágenes al navegador (visualización) se usan funciones diferentes según el tipo de imagen definida en Header. Si pretendemos que la imagen tenga formato JPG habremos puesto en Header la indicación jpeg (¡cuidado! observa la sintaxis... jpeg). En este caso la función de visualización será:

Si se tratara de una imagen en formato PNG (recuerda que debe estar definido en Header) la sintaxis sería:

Eliminando imágenes de la memoria

El primer ejemplo

<?php
/* insertamos la cabecera sin ninguna contenido (ni siquiera línea en blanco)
 qantes  <php */
    Header("Content-type: image/jpeg");
    /* establecemos las dimensiones de la imagne y la creamos */
    $im = imagecreate(200,200);
    /* mostramos las imagen */
    Imagejpeg($im);
    /* la eliminamos de la memoria */
    Imagedestroy($im);
?>

Colores

Creación de colores

PHP permite crear una paleta de colores. Para ello se pueden crear variables de color (con independencia del formato utilizado) mediante la siguiente función:

donde la variable $color recoge el color resultante de mezclar los colores primarios indicados en rojo, verde y azul que serán números enteros comprendidos entre 0 y 255 y que especifican la intensidad de las luces roja, verde y azul utilizadas para la obtención del color y donde $nombre es la variable utilizada para la creación de la imagen por imagecreate

Se pueden definir tantos colores como se deseen tan sólo con utilizar nombres de variables distintos para cada uno de ellos.

Aplicar colores de fondo

Para aplicar un color de fondo a una imagen (no importa el tipo del formato) se utiliza la siguiente función:

donde $nombre es la variable que contiene la imagen, x e y son las coordenadas del punto de la imagen a partir del cual se aplica el relleno y $color el color (previamente definido) que se pretende aplicar a la imagen. Mediante esta función todos los puntos colindantes con el de coordenadas x,y que tengan su mismo color serán rellenados con el color especificado en la variable $color.

Aquí tienes dos ejemplos de creación de una imagen con un color de fondo. Se diferencian únicamente en el formato. La primera será una imagen JPG y la segunda será PNG.

<?php
    Header("Content-type: image/jpeg");
    $im = imagecreate(200,200);
    /* creamos un color de fondo con nombre $fondo */
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    /* aplicamos el clor al fondo */
    Imagefill ($im, 0, 0, $fondo);
    Imagejpeg($im);
   Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $im = imagecreate(200,200);
    /* creamos un color de fondo con nombre $fondo */
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    /* aplicamos el clor al fondo */
    Imagefill ($im, 0, 0, $fondo);
    Imagepng($im);
   Imagedestroy($im);
?>

Figuras

Rectángulos sin relleno

Para dibujar un rectángulo sin relleno (solo las líneas) se utiliza la siguiente función:

Dónde $nombre es el nombre de la imagen, x₀, y₀ son las coordenadas del vértice superior izquierdo y x₁, y₁ las coordenadas del vértice inferior derecho y $color el color que pretendemos asignar a los lados del rectángulo.

El punto (0,0) siempre es la esquina superior izquierda de la imagen y recuerda que las líneas no tienen un color distinto al del fondo no se visualizará el rectángulo.

<?php
    Header("Content-type: image/jpeg");
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $linea=imagecolorallocate ($im, 255, 255, 255);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $linea);
    Imagejpeg($im);
    Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $linea=imagecolorallocate ($im, 255, 255, 255);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $linea);
    Imagepng($im);
    Imagedestroy($im);
?>

Rectángulos con relleno

Para dibujar un rectángulo con relleno se utiliza la siguiente función:

Los parámetros son idénticos a los del caso anterior con la única diferencia de que en este caso el rectángulo aparecerá relleno con el color elegido.

<?php
    Header("Content-type: image/jpeg");
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    /*aplicamos un color al fondo de la imagen */
    Imagefill ($im, 0, 0, $fondo);
    /* trazamos un rectangulo en blanco */
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    /* dentro del rectángulo anterior insertamos otro coloreado */
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    Imagejpeg($im);
    Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    /*aplicamos un color al fondo de la imagen */
    Imagefill ($im, 0, 0, $fondo);
    /* trazamos un rectangulo en blanco */
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    /* dentro del rectángulo anterior insertamos otro coloreado */
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    Imagepng($im);
    Imagedestroy($im);
?>

Polígonos con relleno

Para trazar un polígono con un color de fondo son necesarias dos operaciones:

• – Crear un array con las coordenadas de cada uno de sus vértices.
• – Aplicar la función que dibuja polígonos de este tipo.

La creación del array podría hacerse así:

dónde se irían introduciendo las coordenadas de los sucesivos vértices del polígono (x e y de cada vértice). Una vez creados los vértices aplicaríanos la siguiente función:

donde $nombre es el nombre de la imagen, $vertices es el array que contiene las coordenadas de los vértices, nº vertices es el número de vértices del polígono y $color es el color de relleno.

<?php
    Header("Content-type: image/jpeg");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagefilledpolygon ($im, $esquinas, 4, $blanco);
    Imagejpeg($im);
    Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagefilledpolygon ($im, $esquinas, 4, $blanco);
    Imagepng($im);
     Imagedestroy($im);

?>

Polígonos sin relleno

Su funcionamiento es idéntico al anterior en tanto requiere que se defina el array de coordenadas de los vértices y los parámetros de la función son los mismos indicados en el caso anterior. Sólo se modifica el nombre de la función que en este caso es:

<?php
    Header("Content-type: image/jpeg");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $rojo=imagecolorallocate ($im, 255,0, 0);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagepolygon ($im, $esquinas, 4, $rojo);
    Imagejpeg($im);
    Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $rojo=imagecolorallocate ($im, 255,0, 0);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagepolygon ($im, $esquinas, 4, $rojo);
    Imagepng($im);
    Imagedestroy($im);
?>

Elipses, circunferencias y arcos

Mediante una única función podremos dibujar elipses, circunferencias y arcos. Es la siguiente:

Los parámetros de esta función son los siguientes:

• $nombre es el nombre de la imagen.
• X_centro e Y_centro las coordenadas del centro de la elipse o circunferencia.
• a es la longitud del semieje horizontal de la elipse.
• b es la longitud del semieje vertical de la elipse.
• angulo_inicial es la posición angular del radio inicial del arco y se expresa en grados sexagesimales.
• angulo_final es la posición angular del radio final del arco también en grados sexagesimales.
• $color es el color con el que se dibujará la línea.

Respecto a los ángulos, CERO GRADOS coincide con el cero trigonométrico pero el sentido es contrario, es decir, el de las agujas del reloj.

Obviamente, para dibujar una circunferencia basta con hacer iguales los valores de a y de b y fijar los puntos inicial y final en 0º y 360º respectivamente.

<?php
    Header("Content-type: image/jpeg");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    $rojo=imagecolorallocate ($im, 255, 0,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagepolygon ($im, $esquinas, 4, $blanco);
    imagearc ($im, 100, 100, 160, 160, 0, 360, $fondo);
    imagearc ($im, 100, 100, 160, 100, 0, 360, $rojo);
    imagearc ($im, 100, 100, 100, 160, 0, 360, $rojo);
    Imagejpeg($im);
    Imagedestroy($im);
?>

<?php
    Header("Content-type: image/png");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreate(200,200);
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    $rojo=imagecolorallocate ($im, 255, 0,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagepolygon ($im, $esquinas, 4, $blanco);
    imagearc ($im, 100, 100, 160, 160, 0, 360, $fondo);
    imagearc ($im, 100, 100, 160, 100, 0, 360, $rojo);
    imagearc ($im, 100, 100, 100, 160, 0, 360, $rojo);
    Imagepng($im);
    Imagedestroy($im);
?>

Dibujando sobre una imagen de fondo

PHP permite crear imágenes utilizando como fondo una prEexistente. Para ello es necesario cambiar la instrucción $nom = imagecreate(x,y) por $nom= imagecreatefrompng (nombre_de_la_imagen_de_fondo) si se trata de utilizar una imagen con formato PNG o $nom= imagecreatefromjpeg (nombre_de_la_imagen_de_fondo) cuando se trata de usar una imagen JPG.

La imagen resultante puede tener formato JPG o PNG dependiendo de lo que se especifique en Header y como formato de salida independientemente del formato que pudiera tener la imagen utilizada como fondo de la composición

<?php
    Header("Content-type: image/jpeg");
    $esquinas=array(20,100,100,180,180,100,100,20);
    $im = imagecreatefrompng('./images/cruz.png');
    $fondo=imagecolorallocate ($im, 0, 0, 200);
    $blanco=imagecolorallocate ($im, 255, 255, 255);
    $amarillo=imagecolorallocate ($im, 255, 255,0);
    $rojo=imagecolorallocate ($im, 255, 0,0);
    Imagefill ($im, 0, 0, $fondo);
    imagerectangle ($im, 10, 10, 190, 190, $blanco);
    imagefilledrectangle ($im, 20, 20, 180, 180, $amarillo);
    imagepolygon ($im, $esquinas, 4, $blanco);
    imagearc ($im, 100, 100, 160, 160, 0, 360, $fondo);
    imagearc ($im, 100, 100, 160, 100, 0, 360, $rojo);
    imagearc ($im, 100, 100, 100, 160, 0, 360, $rojo);
    Imagejpeg($im);
    Imagedestroy($im);
?>

Como puedes comprobar en los ejemplos, el tamaño de la imagen es el mismo de la utilizada como fondo.

Guardando imágenes

Las imágenes que son creadas mediante la sintaxis anterior no se guardan en el servidor. Si se pretendiera guardarlas, hay que modificar la sintaxis de las etiquetas:

Así por ejemplo: Imagepng($nombre, "mi_imagen.png") o Imagejpeg($nombre, "mi_imagen.jpg") guardarían en el servidor las imágenes creadas con los nombres mi_imagen.png o mi_imagen.jpg en el directorio actual del servidor.>

Utilización de imágenes dinámicas

En todos los ejemplos anteriores hemos podido visualizar las imágenes con sólo llamarlas desde el navegador, de la misma forma que podríamos visualizar cualquier otra imagen. Pero las imágenes dinámicas pueden ser insertadas en una página web de la misma forma que cualquier otra imagen.

Aquí tienes un ejemplo donde se recogen en una página web todas las imágenes dinámicas creadas anteriormente.

Si observas el código fuente verás que es exactamente el mismo que se utiliza para insertar una imagen normal, con la única diferencia de que aquí el nombre de la imagen será el mismo que el del script PHP que la genera.

---

Ir a la página anterior

Avisos de error y/o sugerencias

Ir a la página Índice

Ir a la página siguiente