El SOS Informatico. Desarrollo y programacion web.: Libreria GD, Crear imagenes con transparencia.

En php para crear imágenes con php como ya e comentado como hace con la librería GD en estos dos tutoriales:

http://sosinformatico.blogspot.com/2011/02/tutorial-creando-un-bonito-y-estilizado.html
http://sosinformatico.blogspot.com/2011/02/tutorial-creando-un-bonito-y-estilizado_24.html

Ahora les voy a mostrar como manejar los colores con transparencia y crear imágenes con transparencias.

Cuando creamos una imagen con gd pues por defecto esta tiene color negro y no esta preparada para usar transparencias para poder usar las transparencias hay que primero activarlas como tal en la imagen para después poderlas usar, las funciones que se necesitan para trabajar con imagenes se usan las siguientes funciones:

imagecolorallocatealpha
Imagecolortransparent
imagealphablending
imagesavealpha

Lo primero que debemos saber es que se necesita tener instalado la version 2 de la libreria db, si ya la tenemos instalada podemos continuar tranquilamente, lo segundo que hay que denotar es que solo podemos trabajar con imágenes gif y png, ya que estas son los unicos dos formatos que soportan canales alfa. La primera función que vamos a analizar es:

Imagecolortransparent

Con esta función definimos un color en una imagen como transparente, para que puede funcionar las imagenes deben haber sido creadas con imagecopymerge() o imagecreatetruecolor(), y lo que hace es especificar un color como transparente en el la imagen, por ejemplo:

<?php
// Crear una imagen de 100x100
$im = imagecreatetruecolor(100, 100);
$rojo = imagecolorallocate($im, 255, 0, 0);
$negro = imagecolorallocate($im, 0, 0, 0);

// Hacer el fondo transparente
imagecolortransparent($im, $negro);

// Dibujar un rectángulo rojo
imagefilledrectangle($im, 4, 4, 50, 25, $rojo);
header('Content-type: image/png');
// Guardar la imagen
imagepng($im);
imagedestroy($im);
exit();
?>

si hacemos esto y lo guardamos con png o gif, pues guarda una imagen con un cuadrado rojo y el fondo transparente, si cambiamos el color transparente de $negro a $rojo veremos que el fondo sale negro y el rectángulo rojo, eso funciona y windows y los navegadores agarran la transparencia de las imágenes png pero photoshop no, photoshop se da cuenta y lo dibuja con el color como es. Por eso recomiendo hacerlo de la siguiente manera:

Imagealphablending y Imagesavealpha

Imagealphablending especifica en que modo serán mezclado los colores a la hora de dibujar una imagen, cuando se establece en true pues al dibujar colores el canal alpha que sea establecido para dibujar sera tomado como la cantidad que va a brillar el color subyacente a través de colores de la imagen, y cuando se establece en false pues se guarda de verdad el canal alpha en la imagen.

A la hora de crear imagenes el uso de estas funciones depende de en que formato lo vamos a guardar si es gif con la función imagealphablending es suficiente pero si vamos a crear una imagen png debemos usar la función imagesavealpha para especificar la bandera de que se debe guardar toda la imagen alpha.

Imagecolorallocatealpha

Ahora bien para poder dibujar un color transparente o semi trasnparente en una imagen, pues debemos usar la función imagecolorallocatealpha, y que es casi la misma que imagecolorallocate lo unico es que agrega un parametro que es el nivel de alfa que va a tener ese colo que el rango es de 0 a 127 siendo 127 el trasnparente absoluto.

Aqui esta el mismo ejemplo anterior pero acomodado para png:

<?php
// Crear una imagen de 100x100
$im = imagecreatetruecolor(100, 100);
imagealphablending($im, false);
imagesavealpha($im, true);
$rojo = imagecolorallocate($im, 255, 0, 0);
$negro = imagecolorallocatealpha($im, 0, 0, 0,127);

// Dibujar el fondo transparente
imagefilledrectangle($im, 0, 0, 100, 100, $negro);
// Dibujar un rectángulo rojo
imagefilledrectangle($im, 4, 4, 50, 25, $rojo);
header('Content-type: image/png');
// Guardar la imagen

imagepng($im);
imagedestroy($im);
exit();
?>

Resultado final:

http://courch7642.webcindario.com/blog/gd2.php

Ahora aparte les dejo dos ejemplos de imágenes con transparencia:

1. 3 círculos semitransparentes con fondo transparente:

<?php
$tamaño = 300;
$imagen=imagecreatetruecolor($tamaño, $tamaño);
imagealphablending($imagen, false);
imagesavealpha($imagen, true);
// algo para obtener un fondo transparente
$fondo = imagecolorallocatealpha($imagen, 255, 255, 255,127);
imagefilledrectangle($imagen, 0, 0, $tamaño, $tamaño, $fondo);

$amarillo_x = 100;
$amarillo_y = 75;
$rojo_x     = 120;
$rojo_y     = 165;
$azul_x     = 187;
$azul_y     = 125;
$radio      = 150;
// asignar colores con valores alfa
$amarillo = imagecolorallocatealpha($imagen, 255, 255, 0, 75);
$rojo     = imagecolorallocatealpha($imagen, 255, 0, 0, 75);
$azul     = imagecolorallocatealpha($imagen, 0, 0, 255, 75);
// dibujar 3 círculos solapados
imagefilledellipse($imagen, $amarillo_x, $amarillo_y, $radio, $radio, $amarillo);
imagefilledellipse($imagen, $rojo_x, $rojo_y, $radio, $radio, $rojo);
imagefilledellipse($imagen, $azul_x, $azul_y, $radio, $radio, $azul);
// ¡no olvide imprimir la cabecera correcta!
header('Content-type: image/png');
// y finalmente, imprimir el resultado
imagepng($imagen);
imagedestroy($imagen);
?>

Resultado final:
http://courch7642.webcindario.com/blog/gd3.php

2. Este codigo genera fondos semitransparentes muy útiles a la hora de diseñar una pagina web. y lo mejor es que podemos especificar que color queremos.

<?php
if(isset($_GET['hex']))
{
	$hex=$_GET['hex'];
	header('Content-Transfer-Encoding: binary');
	header('Content-type: image/png');
	//creo imagen
	if(strlen($hex)==6)
	{
		$hcnt=strlen($hex)/3;
		$color['red']=hexdec(substr($hex,0,$hcnt));
		$color['green']=hexdec(substr($hex,$hcnt,$hcnt));
		$color['blue']=hexdec(substr($hex,$hcnt*2));
	}
	else
	{
		$color['red']=0;
		$color['green']=0;
		$color['blue']=0;
	}
	$fondo = imagecreatetruecolor(10,10);
	imagealphablending($fondo, false);
	imagesavealpha($fondo, true);
	$color['img']=imagecolorallocatealpha($fondo, $color['red'], $color['green'], $color['blue'],75);
	imagefilledrectangle($fondo, 0, 0, 10, 10, imagecolorallocatealpha($fondo, 255, 255, 255,0));
	imagefilledrectangle($fondo, 0, 0, 10, 10, $color['img']);

	imagepng($fondo);
	imagedestroy($fondo);
}
?>