Ver índice
Creando imágenes

        Ocultar índice  

   Índice de contenidos
   Instalación en Windows
   Instalación en Ubuntu
   Servidores seguros
   Páginas dinámicas
   Sintaxis básica
   Operaciones
   Arrays
   Formatos de presentación
   Operadores
   Bucles
   Extraer y ord. información
   Funciones
   Ficheros externos
   Imágenes dinámicas
   Gestión de directorios
   Cookies y sesiones
   Clases y objetos
   Ficheros en formato PDF
   Bases de datos MySQL
   PHP y XML
   PDO - Bases SQLite / MySQL
   MySQL a traves de misqli
   Algo de JavaScript y AJAX


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:

Header("Content-type: image/jpeg") si se trata de crear una imagen JPG

o:

Header("Content-type: image/png") si pretendemos que la imagen tenga formato PNG.

  ¡Cuidado!  

Cualquier etiqueta header (cabecera) ha de incluirse obligatoriamente al comienzo del script antes que ninguna otra instrucción y sin ninguna línea en blanco que la preceda.
Pondremos siempre estas instrucciones inmediatamente debajo de <? sin que las separe ninguna línea en blanco.

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:

$nombre = imagecreate(ancho, alto)

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á:

Imagejpeg($nombre)

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

Imagepng($nombre)

Eliminando imágenes de la memoria

Para borrar imágenes de la memoria del servidor (que no del navegador) se utiliza la siguiente sintaxis:

Imagedestroy($nombre)

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);
?>
Ver ejemplo192.php

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:

$color=imagecolorallocate ($nombre, rojo, verde, azul)

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:

Imagefill($nombre,x,y,$color)

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);
?>
Ver ejemplo193.php

<?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);
?>
Ver ejemplo194.php

Figuras

Rectángulos sin relleno

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

imagerectangle($nombre, x0, y0, x1, y1, $color)

Dónde $nombre es el nombre de la imagen, x0, y0 son las coordenadas del vértice superior izquierdo y x1, y1 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);
?>
Ver ejemplo195.php
<?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);
?>
Ver ejemplo196.php

Rectángulos con relleno

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

imagefilledrectangle($nombre, x0, y0, x1, y1, $color)

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);
?>
Ver ejemplo197.php
<?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);
?>
Ver ejemplo198.php

Polígonos con relleno

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

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

$vertices=(x0, y0, x1, y1,... xn, yn )

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:

imagefilledpolygon($nombre, $vertices, nº vertices , $color)

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);
?>
Ver ejemplo199.php

<?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);

?>
Ver ejemplo200.php

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:

imagepolygon($nombre, $vertices, nº vertices , $color)

<?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);
?>
Ver ejemplo201.php

<?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);
?>
Ver ejemplo202.php

Elipses, circunferencias y arcos

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

imagearc($nom, Xcentro, Ycentro , a, b, anguloinicial, angulofinal, $color)

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

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);
?>
Ver ejemplo203.php
<?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);
?>
Ver ejemplo204.php

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);
?>
Ver ejemplo204a.php
Imagen original PNG
Imagen resultante JPG

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:

Imagepng($nombre) o Imagejpeg($nombre) añadiendo un segundo parámetro con el nombre y la extensión del fichero que vamos de guardar.

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.>

  ¡Cuidado!  

No dejes NUNCA líneas en blanco entre la etiqueta <? de comienzo del script y la línea que contiene Header
Si escribiéramos el script anterior sustituyendo image/jpeg por image/png e Imagejpeg($im) por Imagepng($im) no visualizaríamos nada.
El formato jpg –a falta de especificaciones– considera la imagen con negro como color de fondo, pero png requiere que ese color sea especificado.


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.

ejemplo205.php Ver código fuente

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.