Ver índice
Superponer, rotar y dar transparencia a 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


Colores con transparencia

PHP permite crear colores con transparencia. Para ello se utiliza la función:

ImageColorAllocateAlpha($imagen, rojo, verde, azul, transparencia)

donde $imagen es el identificador de la imagen que ha sido creada previamente, rojo, verde, azul que son valores numéricos (o variables) que contienen –en una escala de 0 a 255– la intensidad luminosa de cada uno de los tres colores primarios y transparencia es un valor numérico comprendido entre 0 y 127 que indica el grado de transparencia de la tinta. El valor 0 indica opacidad total, mientras que 127 establece la transparencia total de ese color.

En el ejemplhemos incluido dos escalas de transparencias superpuestas a intervalos del 10% (desde 0 hasta 100%) transformados a la escala 0-127.

El orden de superposición –similar a las capas de otros programas gráficos– se corresponde con el orden de las instrucciones de creación. Los resultados de las últimas funciones se superponen siempre a los obtenidos como consecuencia de la ejecución de las anteriores.

<?php
/* Creamos una imagen en color verdadero, le aplicamos un color
   de fondo (para evitar el negro por defecto) y creamos un nuevo
   color que utilizaremos para los bordes de rectangulos posteriores*/
Header("Content-type:image/jpeg");
$im_base=imagecreatetruecolor(610,140);
$fondo=imagecolorAllocate($im_base,255,255,200);
$negro=imagecolorAllocate($im_base,0,0,0);
imagefill($im_base,0,0,$fondo);
# definimos las componentes de un nuevo color
$R=255; $G=00; $B=00;
/* vamos a construir una escala de transparencias
   de 0 a 10 que correspondería con valores de transparencia
   de 0% al 100%.
   Crearemos un bucle que dibuje rectangulos rellenos
   con el color definido en la variable trans que irá aplicando
   al color básico los diferentes grados de transparencia
   y le pondremos un contorno negro para encuadrarlos*/

for($i=0;$i<=10;$i++){
   $trans=ImageColorAllocateAlpha($im_base,$R,$G,$B,(int)($i*127/10));
   imagefilledrectangle($im_base, 10+55*$i, 20, 50+55*$i, 80, $trans);
   imagerectangle($im_base, 10+55*$i, 20, 50+55*$i, 80, $negro);
}
#creamos un nuevo color y repetimos el proceso con nuevos rectangulos
#superpuestos a los anteriores y con las transparencias en sentido opuesto
# es decir, de 100 a 0%
$R=0; $G=0; $B=255;
for($i=0;$i<=10;$i++){
  $trans=ImageColorAllocateAlpha($im_base,$R,$G,$B,127-(int)($i*127/10));
  imagefilledrectangle($im_base, 10+55*$i, 60, 50+55*$i, 120, $trans);
  imagerectangle($im_base, 10+55*$i, 60, 50+55*$i, 120, $negro);
}
# visualizamos el resultado
imagejpeg($im_base);
ImageDestroy();
?>
Ver ejemplo .jpg Ver ejemplo .png Ver ejemplo .gif

Transparencia en imágenes externas

También resulta posible ajustar el grado de transparencia de una imagen externa. Mediante la función

imagecopymerge($destino, $origen,Xd, Yd, Xf, Yf, Dx, Dy, opacidad)

dónde $destino es el identificador de la imagen sobre la que se va a colocar la transparencia. Como es lógico, deberá haber sido creada antes de incluir la función. $origen es el identificador de la imagen que pretendemos incluir con un determinado grado de transparencia, Xd e Yd son las coordenadas de un punto situado en la esquina superior izquierda de la imagen destino a partir del que queremos que se impresione la nueva imagen. Si queremos una imagen a sangre pondremos 0,0 y, si quieres dejar márgenes, habrá que poner los anchos de esos márgenes (izquierdo y superior) respectivamente. Xf e Yf nos servirán para reencuadrar la foto original recortando por la izquiera y por arriba, respectivamente, los anchos en pixels que aquí se indiquen. Dx y Dy indican el ancho y el alto (por este orden) que va a tener la «mancha de imagen». Ten en cuenta que no puedes salirte del papel así que los valores anteriores sumados con los márgenes que hayas establecido no podrán ser mayores que las dimensiones que has elegido para la imagen destino. Por último, opacidad es un parámetro al que puede asignarse un valor comprendido entre 0 y 100 y representa el porcentaje de opacidad de la imagen superpuesta. Con un valor cien sería totalmente opaca y si fuera cero la transparencia sería total.

<?php
# obtener la imagen
$original=$_SERVER['DOCUMENT_ROOT']."/php/images/aviones4.jpg";
# buscar el formato de la imagen mediante su extensión
for($i=strlen($original)-1;$i>0;$i--){
    if (substr($original,$i,1)=="."){
       $tipo=substr($original,$i+1);
       break;
    }
}
# tamaño del original extraido del array devuelto por getimagesize
$tamano=getimagesize($original);
$orig_Ancho = $tamano[0];
$orig_Alto =$tamano[1];
# estableceremos un margen en blanco alrededor de la imagen de 10 pixels
# igual por los cuatro lados
$borde=10;
$Ancho=$orig_Ancho+2*$borde;
$Alto=$orig_Alto+2*$borde;
# creamos la imagen segun el formato original
switch($tipo){
    case "jpg":
          $importada=imagecreatefromjpeg($original);
      break;
    case "png":
          $importada=imagecreatefrompng($original);
      break;
    case "gif":
          $importada=imagecreatefromgif($original);
    break;
 }
Header("Content-type:image/jpeg");
# creamos una imagen nueva, un color de fondo y la rellenamos con él
$im_base=imagecreatetruecolor($Ancho,$Alto);
$fondo=imagecolorAllocate($im_base,255,255,200);
imagefill($im_base,0,0,$fondo);
# superponemos la imagen importada posicionandola y aplicandole
# una trasmparencia de 50
imagecopymerge( $im_base, $importada, $borde, $borde, 0, 0, $orig_Ancho, $orig_Alto ,50 );

imagejpeg($im_base);
ImageDestroy();
?>
Ver ejemplo .jpg Ver ejemplo .png Ver ejemplo .gif

Si observas los resultados obtenidos en el ejemplo en el que intentamos dar transparencia a una imagen en formato png podrás observar que deja bastante que desear y produce un efecto indeseado por el recorte de las zonas presuntamente transparentes.

Esta situación nos obliga a replantear la situación para prever esta circunstancia y recurrir a un truco que parece solventar ese problema. La modificación del código fuente es la incluimos aquí debajo.

Header("Content-type:image/jpeg");
  $im_base=imagecreatetruecolor($Ancho,$Alto);
  $fondo=imagecolorAllocate($im_base,255,255,200);
  imagefill($im_base,0,0,$fondo);
  /* el truco consiste en crear una segunda imagen (im_truco)cuyas
  dimensiones coincidan con las de la imagen transparente
  que pretendemos colocar. Le asignamos como color el fondo el mismo
  de la imagen destino y hacemos transparente ese color en esa imagen.
	 Después hacemos una copia de la imagen original sobre la imagen
	 im_truco y sustituimos en la función imagecopymerge la
	 imagen original por la obtenida mediante esta chapucilla */
 $im_truco=imagecreatetruecolor($orig_Ancho, $orig_Alto);
 $fondo1=imagecolorAllocate($im_truco,255,0,200);
 imagefill($im_truco,0,0,$fondo1);
 imagecolortransparent ($im_truco,$fondo1);
 imagecopy($im_truco, $importada, 0, 0, 0, 0, $orig_Ancho, $orig_Alto);
imagecopymerge( $im_base , $im_truco, $borde , $borde , 0 , 0 ,$orig_Ancho, $orig_Alto ,60 );
imagejpeg($im_base);
ImageDestroy();

Ver el nuevo resultado

Montaje de imágenes

Superponer una parte de una imagen

Mediante esta función se puede copiar sobre una imagen una parte de otra. Permite extraer porciones de imágenes con su tamaño original sin que permita ampliarlas ni reducirlas. Su sintaxis es la siguiente:

imagecopy($destino, $original, $x, $y, $X, $Y, $A, $H)

donde: $destino el identificador de la imagen destino, $original el identificador de la imagen original, $x y $y las coordenadas donde se posicionará –en la imagen destino– la esquina superior izquierda de la porción copiada, $X y $Y son los anchos de los recortes izquierdo y superior de la imagen a copiar y $A y $H el ancho y el alto del área de imagen que pretendemos copiar.

<?php
/* definimos las imagenes */
$imagen_base=$_SERVER['DOCUMENT_ROOT']."/php/images/aviones1.jpg";
$imagen_superpuesta=$_SERVER['DOCUMENT_ROOT']."/php/images/aviones2.jpg";

Header("Content-type: image/jpeg");
           /* creamos en memoria dos imagenes  copia de las originales */
           $capa_base =imagecreatefromjpeg($imagen_base);
           $capa_superpuesta =imagecreatefromjpeg($imagen_superpuesta); 
           /* realizamos el montaje de la nueva imagen sobre la base */
           imagecopy($capa_base,$capa_superpuesta, 30, 40, 70, 80, 195, 225);
            /* visualizamos la imagen */
           imagejpeg($capa_base);
           imagedestroy();
?>
Ver ejemplo

Rotación de imágenes

Es posible presentar imágenes rotadas por medio de la funcion:

imagerotate($imagen,angulo,$fondo)

dónde el parámetro $imagen es el identificador de la imagen a rotar, angulo es el ángulo de rotación (expresado en grados y tomado en sentido trigonométrico) y $fondo es un color de fondo asociado a la imagen a rotar que puede ser definido mediante la función imagecolorallocate u otra función que permita asociar colores a imágenes.

<?php
# obtener la imagen
$original=$_SERVER['DOCUMENT_ROOT']."/php/images/aviones3.jpg";
for($i=strlen($original)-1;$i>0;$i--){
    if (substr($original,$i,1)=="."){
       $tipo=substr($original,$i+1);
       break;
    }
}
switch($tipo){
    case "jpg":
          $importada=imagecreatefromjpeg($original);
      break;
    case "png":
          $importada=imagecreatefrompng($original);
      break;
    case "gif":
          $importada=imagecreatefromgif($original);
    break;
 }
  Header("Content-type:image/jpeg");
    $fondo=imagecolorallocatealpha($importada,255,255,0,40);
      $im_base=imagerotate($importada,30,$fondo);
	   imagejpeg($im_base);
ImageDestroy();
?>
Ver ejemplo

Transparencia en capas rotadas

Cuando trabajamos con una imagen truecolor en la que vamos incluyendo en diferentes capas (mediante copy ó copymerge) otras imágenes –recortadas, rotadas, creadas a partir de otra imagen, etc.– la transparencia de los colores de los fondos de rotación no plantea ningún problema. Es suficiente usar la función imagecolortransparent, eso sí, aplicándola a la imagen correspondiente antes de insertarla mediante la opción copy en la imagen final.

  ¡Cuidado!  

La función imagerotate() no funciona con la versión de la librería GD que se instala con Ubuntu o Debian que es diferente de la que utilizan otras distribuciones de PHP (la de Windows por ejemplo). La forma de resolverlo puedes encontrarla aquí

Ejemplo resumen

Aquí tienes un ejemplo en el que hemos utilizado superposiciones de imágenes, con giros, recortes y diferentes grados de transparencia.

Ver ejemplo resumen Ver codigo fuente