Aunque con bastante retraso, ha sido publicado el día 6 de Noviembre del 2008, acabo de descubrir que en la página 2 del suplemento ciberpaís del diario "El País"-publicado junto con el diario todos los Jueves- publicaron el enlace a este blog en la sección de sugerencias de los lectores (a falta de otras, la sugerencia fue mía).
Colores transparentes
|
Superposición de áreas transparentes <? /* 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(); ?> |
Transparencia en imágenes externas
La función imagecopy
Rotación de imágenes
Transparencia en la rotación de imágenes
Transparencia en capas rotadas
|
Transparencia de imágenes externas <? # obtener la imagen $original="c:\\apache\\htdocs\\cursoPHP\\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(); ?> 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();
La función imagecolortransparent ($imagen,$color) permite hacer transparente –en la imagen indicada mediante la variable $imagen– el color señalado en la variable $color. La variable $color deberá estar definida previamente mediante la función imagecolorAllocate u alguna otra que permita identificar un color determinado.
<? # obtener la imagen $original="c:\\apache\\htdocs\\cursoPHP\\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(); ?>
Diferencias entre imagecreate e imagecreatetruecolor Este es el código fuente de un script que lee una imagen externa y la copia íntegra sobre otra imagen creada mediante PHP. Si visualizas el ejemplo podrás observar las diferencias entre usar la función imagecreate o utilizar imagecreatetruecolor. <? $original="c:\\apache\\htdocs\cursoPHP\\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; } $dimensiones=getimagesize($original); $Ancho_original=$dimensiones[0]; $Alto_original=$dimensiones[1]; Header("Content-type:image/png"); $im_base=imagecreate($Ancho_original+20,$Alto_original+20); $fondo=imagecolorallocate($im_base,255,0,0); imagecolortransparent($im_base,$fondo); imagecopy($im_base,$importada,10,10,0,0,$Ancho_original,$Alto_original); imagepng($im_base); ImageDestroy(); ?>
Ejemplo resumen Aquí tienes un ejemplo en el que hemos utilizado superposiciones de imágenes, con giros, recortes y diferentes grados de transparencia. |
Lectura de imágenes externas
|
<? # indicar la ruta de la imagen $original="C:\\Apache\\htdocs\\cursoPHP\\images\\caballos.jpg"; # extraer el tipo de imagen según su la extension del fichero for($i=strlen($original)-1;$i>0;$i--){ if (substr($original,$i,1)=="."){ $tipo=substr($original,$i+1); break; } } # las diferentes opciones dependiendo del formato de la imagen switch($tipo){ case "jpg": Header("Content-type:image/jpeg"); $nueva=imagecreatefromjpeg($original); imagejpeg($nueva); break; case "png": Header("Content-type:image/png"); $nueva=imagecreatefrompng($original); imagepng($nueva); break; case "gif": Header("Content-type:image/gif"); $nueva=imagecreatefromgif($original); imagegif($nueva); break; } ImageDestroy(); ?>
Observa que en las imágenes en formato png se visualizan con deficiencias en los bordes de las áreas transparentes. Con el método que vemos a continuación ese problema se reduce considerablemente. |
Redimensionado de imágenes externas
|
<? # indicar la ruta de la imagen $original="C:\\Apache\\htdocs\\cursoPHP\\images\\caballos.jpg"; for($i=strlen($original)-1;$i>0;$i--){ if (substr($original,$i,1)=="."){ $tipo=substr($original,$i+1); break; } } # dimesiones del original $tamano=getimagesize($original); $orig_Ancho = $tamano[0]; $orig_Alto =$tamano[1]; # factores de ampliación, distintos para provocar una distorsión # en la imagen resultante $ampliacion_X=2; $ampliacion_Y=1.5; # dimesiones de la imagen resultante. Vamos a dejarla a sangre # (sin márgenes en blanco) y vamos a reproducir el original # sin reencuadrar así que las esquinas superiores izquierdas de # ambas imágenes estarán en 0,0. $resultado_Ancho=$orig_Ancho*$ampliacion_X; $resultado_Alto= $orig_Alto*$ampliacion_Y; #creamos una imagen a partir de la original. Debemos elegir #la funcion adecuada al tipo de imagen original switch($tipo){ case "jpg": $importada=imagecreatefromjpeg($original); break; case "png": $importada=imagecreatefrompng($original); break; case "gif": $importada=imagecreatefromgif($original); break; } # insertamos la cabecera de la nueva imagen Header("Content-type:image/jpeg"); #creamos una imagen nueva en color verdadero $im_base=imagecreatetruecolor($resultado_Ancho,$resultado_Alto); #aplicamos un color de fondo a la nueva imagen #para poder visualizar que incluye la transparencia del png o del gif if($tipo=="png" OR $tipo=="gif"){ $fondo=imagecolorAllocate($im_base,255,255,200); imagefill($im_base,0,0,$fondo); } #superponemos la imagen importada sobre la que acabamos de crear imagecopyresampled($im_base,$importada,0,0,0,0, $resultado_Ancho, $resultado_Alto, $orig_Ancho,$orig_Alto); # visualizamos la imagen resultante imagejpeg($im_base); ImageDestroy(); ?>
Observa que –tanto en el ejemplo anterior como en el siguiente– solo hemos utilizado la extensión de la imagen original para elegir la función imagecreatefrom.... En el Header hemos puesto image/jpeg y, como es obvio, hemos utilizado la función asociada a este formato (imagejpeg). Si sustituimos ambos valores por los correspondientes a otro formato (gif, png) obtendríamos resultados similares.
<? # obtener la imagen $original="C:\\Apache\\htdocs\\cursoPHP\\images\\aviones4.jpg"; for($i=strlen($original)-1;$i>0;$i--){ if (substr($original,$i,1)=="."){ $tipo=substr($original,$i+1); break; } } # tamaño del original $tamano=getimagesize($original); $orig_Ancho = $tamano[0]; $orig_Alto =$tamano[1]; # estableceremos un margen en blanco alrededor de la imagen de 5 pixels # igual por los cuatro lados $margen=10; # establecemos rocortes para reencuadrar la imagen $recorte_izq=50; $recorte_sup=80; $recorte_der=40; $recorte_inf=60; # calculamos las dimensiones para utilizar como parámetros # en la funcion imagecopyresampled # ancho y alto original recortado $Ancho_recortado=$orig_Ancho-$recorte_izq-$recorte_der; $Alto_recortado=$orig_Alto-$recorte_sup-$recorte_inf; # factores de ampliación en este caso iguales # sin distorsión de imagen $ampliacion_X=1; $ampliacion_Y=1; # dimensiones del soporte $papel_Ancho=$Ancho_recortado*$ampliacion_X+ 2*$margen; $papel_Alto=$Alto_recortado*$ampliacion_Y+2*$margen; # dimensiones de la mancha de imagen al positivar # hay que quitar los márgenes $resultado_Ancho=$papel_Ancho -2*$margen; $resultado_Alto=$papel_Alto -2*$margen; 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"); $im_base=imagecreatetruecolor($papel_Ancho,$papel_Alto); $fondo=imagecolorAllocate($im_base,255,255,200); imagefill($im_base,0,0,$fondo); imagecopyresampled($im_base,$importada,$margen,$margen, $recorte_izq,$recorte_sup, $resultado_Ancho,$resultado_Alto, $Ancho_recortado,$Alto_recortado); imagejpeg($im_base); ImageDestroy(); ?>
|
Diagramas de sectores
Combinar dos constantes
Efecto tridimensional
|
Diagramas de sectores <? $im = imagecreate (400, 400); $fondo = imagecolorallocate($im, 226, 226, 226); $col1=imagecolorallocate($im,255,255,0); $col2=imagecolorallocate($im,255,0,0); imagefilledarc($im, 200, 200, 350, 300, 20, 240, $col1, IMG_ARC_PIE); imagefilledarc($im, 200, 200, 350, 300, 10, 150, $col2, IMG_ARC_NOFILL); header('Content-type: image/png'); imagepng($im); imagedestroy($im); ?> <? $im = imagecreate (400, 400); $fondo = imagecolorallocate($im, 226, 226, 226); $col1=imagecolorallocate($im,255,255,0); $col2=imagecolorallocate($im,255,0,0); imagefilledarc($im, 200, 200, 350, 300, 20, 240, $col1, IMG_ARC_EDGED); imagefilledarc($im, 200, 200, 350, 300, 10, 150, $col2, IMG_ARC_NOFILL); header('Content-type: image/png'); imagepng($im); imagedestroy($im); ?> <? $im = imagecreate (400, 400); $fondo = imagecolorallocate($im, 226, 226, 226); $color1=imagecolorallocate($im,255,0,0); imagefilledarc ($im, 200, 200, 350, 300, 20, 240, $color1, IMG_ARC_NOFILL|IMG_ARC_EDGED); header('Content-type: image/gif'); imagegif($im); imagedestroy($im); ?> <? $im = imagecreate (400, 400); $fondo = imagecolorallocate($im, 226, 226, 226); $color1=imagecolorallocate($im,255,0,0); imagefilledarc ($im, 200, 200, 350, 300, 50, 200, $color1, IMG_ARC_CHORD); header('Content-type: image/gif'); imagegif($im); imagedestroy($im); ?> <? $im = imagecreate (400, 400); $fondo = imagecolorallocate($im, 226, 226, 226); $color1=imagecolorallocate($im,200,0,0); $color2=imagecolorallocate($im,255,0,0); $color3=imagecolorallocate($im,255,255,255); for($i=200;$i<225;$i++){ imagefilledarc($im, 200, $i, 370, 270, 50, 330, $color1, IMG_ARC_NOFILL|IMG_ARC_EDGED); } imagefilledarc($im, 200, 200, 370, 270, 50, 330, $color2, IMG_ARC_EDGED); imagefilledarc($im, 200,200, 370, 270, 50, 330, $color3, IMG_ARC_NOFILL|IMG_ARC_EDGED); header('Content-type: image/gif'); imagegif($im); imagedestroy($im); ?> |
|
sudo wget http://deb.mulx.net/playonlinux_hardy.list -O /etc/apt/sources.list.d/playonlinux.list |
|
sudo wget http://deb.mulx.net/playonlinux_gutsy.list -O /etc/apt/sources.list.d/playonlinux.list |
Utilizando fuentes TrueType
Instalación de fuentes
Escribiendo con fuentes TrueType
Colocando textos
|
Dibujando segmentos Aunque presentaremos únicamente el código fuente de una de las imágenes, para hacer la comprobación de las funciones y las diferencias de visualización insertaremos dos ejemplos. Uno en formato PGN y otro en JPG. Recuerda que las únicas diferencias entre ambos radican en utilizar: Header("Content-type: image/png") o Header("Content-type: image/jpeg") y en las funciones Imagepng ó Imagejpeg. Texto TrueType horizontal <? Header("Content-type: image/png"); $im = imagecreate(400,300); $fondo=imagecolorallocate ($im, 255, 255, 210); $rojo=imagecolorallocate ($im, 255, 0, 0); $texto="PHP"; Imagettftext($im, 40, 0, 100, 270, $rojo, "./fuentes/fuente2.ttf", $texto); Imagepng($im); imagedestroy($im); ?>
Texto TrueType girado <? Header("Content-type: image/png"); $im = imagecreate(400,300); $fondo=imagecolorallocate ($im, 255, 255, 210); $rojo=imagecolorallocate ($im, 255, 0, 0); $texto="Me gusta PHP"; Imagettftext($im, 40, 30, 100, 270, $rojo, "./fuentes/fuente2.ttf", $texto); Imagepng($im); imagedestroy($im); ?>
Centrando textos Aquí tienes un ejemplo donde utilizando ImageTTFBox e ImageTTFText se puede centrar un texto -tanto si es horizontal como si está girado- con relación a un punto. En este ejemplo, el punto de referencia para el centrado es (200,150) que es el centro de la imagen. Las coordenadas de ImageTTFText, como puedes ver, están calculadas usando las coordenadas de ese punto de referencia y los valores del array generado por ImageTTFBox . Si la variable que contiene el array generado por ImageTTFBox se llama $pepa, las coordenadas del centro del rectángulo imaginario son $pepa[4]/2 y $pepa[5]/2 Partiendo de esos valores, si queremos centrar el texto sobre un punto de la imagen cuyas coordenadas son (X,Y) nos basta con escribir como parámetros de la función ImageTTFText los siguientes:
Este procedimiento es válido tanto para textos horizontales como para textos girados. Aquí lo tienes: <? Header("Content-type: image/png"); $im = imagecreate(400,300); $fondo=imagecolorallocate ($im, 255, 255, 210); $gris=imagecolorallocate ($im, 160, 160,160); $rojo=imagecolorallocate ($im, 255, 0, 0); $texto="El mundo del PHP"; $texto1="lleno de posibilidades"; $marco= ImageTTFBBox (40, 0, "./fuentes/arial.ttf", $texto); Imagettftext($im, 40, 0, 200-$marco[4]/2, 150-$marco[5]/2, $gris, "./fuentes/arial.ttf", $texto); $marco1= ImageTTFBBox (30, 30, "./fuentes/fuente2.ttf", $texto1); Imagettftext($im, 30, 30, 200-$marco1[4]/2, 150-$marco1[5]/2, $rojo, "./fuentes/fuente2.ttf", $texto1); Imagepng($im); imagedestroy($im); ?>
Un ejemplo resumen Aquí tienes un ejemplo bastante completo de generación de imágenes dinámicas.
En servidores UNIX y LINUX la forma en la que indicamos el path del directorio que contiene las fuentes varía sustancialmente respecto a la que hemos utilizado en estos ejemplos. En aquellos, además de invertir los separadores, se requiere indicar siempre rutas absolutas, con lo cual habría que hacer las modificaciones oportunas si se tratara de publicar en un hosting que utilice alguno de estos sistemas operativos. |
Trazando segmentos
Colores de fondo
Crear transparencias
Insertando textos
Tipos de letra
|
Dibujando segmentos Aunque presentaremos únicamente el código fuente de una de las imágenes, para hacer la comprobación de las funciones y las diferencias de visualización insertaremos dos ejemplos, uno en formato PGN y otro en JPG. Recuerda que las únicas diferencias entre ambos radican en utilizar: Header("Content-type: image/png") o Header("Content-type: image/jpeg") y en las funciones Imagepng ó Imagejpeg. <? Header("Content-type: image/png"); $im = imagecreate(200,200); $fondo=ImageColorAllocate ($im,0,0,255); $linea=ImageColorAllocate ($im,255,255,255); imageline($im,0,0,200,200,$linea); Imagepng($im); Imagedestroy($im); ?>
Fondos transparentes <? Header("Content-type: image/png"); $im = imagecreate(200,200); $fondo=ImageColorAllocate ($im,0,0,255); $linea=ImageColorAllocate ($im,255,0,0); imagecolortransparent ($im ,$fondo); imageline($im,0,0,200,200,$linea); Imagepng($im); Imagedestroy($im); ?>
Aquí tienes una página -con un color de fondo- en la que puedes visualizar las diferencias entre los dos formatos. Insertando caracteres <? Header("Content-type: image/png"); $im = imagecreate(150,150); $t1="Tamaño 1"; $t2="Tamaño 2"; $t3="Tamaño 3"; $t4="Tamaño 4"; $t5="Tamaño 5"; $fondo=imagecolorallocate ($im, 0, 0, 200); $amarillo=imagecolorallocate ($im, 255, 255,0); imagechar ($im, 1, 0, 0, $t1, $amarillo); imagechar ($im, 2, 20, 20, $t2, $amarillo); imagechar ($im, 3, 40, 40, $t2, $amarillo); imagechar ($im, 4, 60, 60, $t2, $amarillo); imagechar ($im, 5, 80, 80, $t2, $amarillo); Imagepng($im); imagedestroy($im); ?>
<? Header("Content-type: image/png"); $im = imagecreate(150,150); $t1="Tamaño 1"; $t2="Tamaño 2"; $t3="Tamaño 3"; $t4="Tamaño 4"; $t5="Tamaño 5"; $fondo=imagecolorallocate ($im, 0, 0, 200); $amarillo=imagecolorallocate ($im, 255, 255,0); imagecharup ($im, 1, 10, 10, $t1, $amarillo); imagecharup ($im, 2, 20, 20, $t2, $amarillo); imagecharup ($im, 3, 40, 40, $t2, $amarillo); imagecharup ($im, 4, 60, 60, $t2, $amarillo); imagecharup ($im, 5, 80, 80, $t2, $amarillo); Imagepng($im); imagedestroy($im); ?>
<? Header("Content-type: image/png"); $im = imagecreate(150,150); $t1="Tamaño 1"; $t2="Tamaño 2"; $t3="Tamaño 3"; $t4="Tamaño 4"; $t5="Tamaño 5"; $fondo=imagecolorallocate ($im, 0, 0, 200); $amarillo=imagecolorallocate ($im, 255, 255,0); imagestring ($im, 1, 10, 20, $t1, $amarillo); imagestring ($im, 2, 10, 40, $t2, $amarillo); imagestring ($im, 3, 10, 60, $t3, $amarillo); imagestring ($im, 4, 10, 80, $t4, $amarillo); imagestring ($im, 5, 10, 100, $t5, $amarillo); Imagepng($im); imagedestroy($im); ?> img21.php
<? Header("Content-type: image/png"); $im = imagecreate(150,150); $t1="Tamaño 1"; $t2="Tamaño 2"; $t3="Tamaño 3"; $t4="Tamaño 4"; $t5="Tamaño 5"; $fondo=imagecolorallocate ($im, 0, 0, 200); $amarillo=imagecolorallocate ($im, 255, 255,0); imagestringup ($im, 1, 10, 100, $t1, $amarillo); imagestringup ($im, 2, 20, 100, $t2, $amarillo); imagestringup ($im, 3, 40, 100, $t3, $amarillo); imagestringup ($im, 4, 60, 100, $t4, $amarillo); imagestringup ($im, 5, 80, 100, $t5, $amarillo); Imagepng($im); imagedestroy($im); ?>
|
