Biblioteca grafica GD

download Biblioteca grafica GD

of 6

Transcript of Biblioteca grafica GD

  • 5/9/2018 Biblioteca grafica GD

    1/6

    Biblioteca grafica GOManual por: DesarrolioWeb.com"Tu mejor ayuda para aprender a hacer webs" Version on-line:http://www.desarrolioweb.com/manuales/16

    Creaci6n de imagenes dlnarnlcas con PHP IUna de las peculiaridades que PHP nos presenta con respecto a otros lenguajes dinamicos es lautlllzaclon de la lIamada biblioteca GD. Esta biblioteca no es mas que un conjunto de funciones quetienen como objeto la creacion de imagenes.En efecto, crear imagenes por medio de un lenguaje de proqrarraclon puede resultar en un principiomas complicado y tedioso que servirse de otras herramientas grMicas mucho mas visuales ypotentes presentes en la totalidad de las aplicaciones de disefio qrafico. Sin embargo, no todo van aser inconvenientes, mas bien todo 10contrario. Entre otras ventajas, el uso de un lenguaje dinarncopara la creaclon de imagenes nos permite:

    La creaci6n de botones dlnarnlcosUna de las principales aplicaciones de esta herramienta grMica es la posibilidad de crearqraflcos "virtuales" que se generan dinarncarrente en funcion de los pararretros que seindiquen al script responsable de su creaclon, De este modo podemos generar botonesdlnarnicos en los que, especificando el texto a mostrar, el script se encarga de crearlodebidamente combinado con una imagen. Esto nos evita tener que crear cada uno de losbotones de nuestro sitio con una apllcaclon de disefio grMico. Podemos, mediante una simplelIamada al script generador del boton, crearlos en el momento que los vamos a usar.

    Tratamiento automatizado de imagenes recibidas de los usuariosSupongamos que disponemos de un sitio en el que recibimos fotos 0 grMicos y estes han deser redimensionados y duplicados en distintos tarnafios (un tarnafio real y un thumbnail porejemplo).Podrfamos disponer de unos scripts sencillos y de rapida creaclon que permitirfantratar las imagenes, duplicarlas y almacenarlas en bases de datos rapida y eficazmente.

    La actualizaci6n y personalizaci6n mas flexibleCrear grMicos por proqrarracion implica usar variables para definir colores 0 tipos y tarrafios deletra. Esto quiere decir que, lIegado el momento, podemos cambiar el aspecto de multitud deimagenes creadas con un mismo script tan solo modificando unos pocos pararretros de este,Esto nos ahorrarfa muchas horas de trabajo el di a en el que decidamos dar un cambio dedisefio a la paqlna por ejemplo. Por otra parte, ponemos a disposiclon del usuario un elementoadicional de interaccion dado que esta parametrizacion puede ser lIevada a cabo por el mismoy guardada como cookies en su disco duro.

    EI ahorro en memoriaSi bien es posible crear archivos con estas herramientas, tarrolen es posible crear las imagenesde una forma temporal 10cual nos permite economizar memoria. Este elemento puede serinteresante en casas en los que tenemos un espacio de alojamiento limitado 0 bien si lasimagenes que mostramos en el sitio son numerosas y se muestran pocas veces. Sin embargo,tarrmen tiene el efecto de resultar mas lento puesto que la imagen ha de ser creada antes deser mostrada 10cual requiere un tiempo de procesamiento suplementario.

    http://www.desarrolioweb.com/manuales/16http://www.desarrolioweb.com/manuales/16
  • 5/9/2018 Biblioteca grafica GD

    2/6

    Como puede verse, en determinadas situaciones, el uso de la biblioteca GD puede revelarse comouna herramienta muy valiosa para el desarrollo de nuestro sitio.

    Creaci6n de imagenes dlnarnlcas con PHP IILa biblioteca GD no es reconocida directamente por nuestro PHP instalado por defecto. Cualquierintento de ejecucion de un script que emplee este tipo de funciones dare inevitablemente un error amenos que nos hayamos encargado de instalar el rn6dulo correspondiente.En el caso de un servidor Apache funcionando bajo Linux, podemos activar el rn6dulo en configuremediante la funcion -with-gd[=path}. Donde path resulta ser el camino donde se aloja el archivo dela librerla. Para una descripcion pormenorizada visita este enlace.Los usuarios de Windows han de instalar el archivo php gd.dll Y activar el rn6dulo de la biblioteca enel archivo de ccnflquraclon php.ini (Iocalizado por regia general en el directorio C:\Windows). Paraactivar el rn6dulo nada mas sencillo que seguir los pasos siguientes:1.-Abrir con un editor de texto el archivo php.ini.2.- Localizar en el codlqo del archivo la linea: ;extension=php_gd.dll3.- Borrar el punto y coma; que juega el papel de comentario4.- Localizar la secclon Paths and Directories y en la linea extension_dir= introducir el camino flslcoen el que hemos albergado el archivo php_gd.dll. Ej. extension_dir=C:\Archivos de programa\PHP\Llevados a cabo estes pasos, PHPesta en sltuaclon de reconocer cualquier lIamada a una funcion dela biblioteca GD. Esta biblioteca freeware de la corrpafila americana Boutell presenta en sus versionesmas actuales (en el momenta de redaccion de este articulo la 2.0.1. beta) una importante variantecon respecto a sus predecesoras: no tiene en cuenta el Formato GIF. En efecto, como suele pasarcon todo aquello que tiene exlto, el GIF deja de ser gratis y para ser utilizado en aplicaciones ha depagarse una licencia. Es por ello que la biblioteca GD incluye el Formato PNGcomo alternativa 1 0 cualresulta a todas luces indiferente para nuestros proposltos salvo por el hecho de que actualmente elFormato PNGno es reconocido por la totalidad de los navegadores. Este inconveniente esactualmente solventado por la mayorfa de los programadores utilizando versiones antiguas de labiblioteca que siguen circulando por la red.

    Creaci6n de imagenes dlnamlcas con PHP IIIPasemos a contlnuaclon a describir algunas de las funciones mas corninrrente utilizadas comenzandopor aquellas que no tienen un verdadero proposlto grafico sino mas bien "administrativo". Paraobtener mas informacion sobre estas u otras funciones qraflcas pasaos, como no, por la pagina oficialde PHP.

    Funciones de creacion y almacenamiento en archivosFuncion Descripcion

    imagecreate Crea una imagen de dimensiones dadasSintaxis

    $im = imagecreate($x,$y)$im =imagecreatefrorngif($archivo)$im =imagecreatefrompng($archivo)$im =imagecreatefromjpeg($archivo)

    Crea una imagen que tiene como fondo unimagecreatefromgif archivo GIF definidoCrea una imagen que tiene como fondo unimagecreatefrompng archivo PNGdefinido

    . t f . Crea una imagen que tiene como fondo unImagecrea e rom]peg archivo JPEGdefinido

  • 5/9/2018 Biblioteca grafica GD

    3/6

    imagegif

    imagepng

    imagejpegimagedestroy

    Muestra la imagen creada en el navegador yla guarda como un archivo .gif si se $im = imagegif($im[,$archivoDespecificaMuestra la imagen creada en el navegador y $im =la guarda como un archivo.png si se imagepng($im[,$archivoDespecificaMuestra la imagen creada en el navegador yla guarda como un archivo.jpg si seespecificaLibera la memoria ocupada por la imagen

    $im =imagejpeg($im[,$archivo])Imagedest roVe$im)

    A notar que los archives no tienen por que ser almacenados como tales. Pueden ser directamentemostrados sin que para ello hayamos ocupado espacio en el disco duro. Para ello tan solo hay queomitir la variable $nombre (entre corchetes).Por otra parte, no todas las versiones de bibliotecas GD soportan todos los formatos. De hecho, escomplicado hacerse con una misma version que acepte las tres a la vez.Funciones informativas

    Funciongetimagesize

    imagesximagesy

    DescripcionGenera un array con las (sarr) informaciones de la imagen:Anchura, altura, formato (1 = GIF, 2 = JPG, 3 = PNG),cadena "height=altura width=anchura" del codigo HTMLDevuelve la anchura de la imagen $imDevuelve la altura de la imagen $im

    Sintaxis$arr = getimagesize($filename)sancho =imagesx($im)$alto= imagesy($im)$total =imagecolorstotal($im)magecolorstotal Devuelve el nurrero total de colores empleadossarr =Nos da un array con las coordenadas de las esquinas de un imagettfbbox($talla,

    imagettfbbox cuadro imaginario que rodea nuestro texto de fuente tipo $angulo,True Type $archivo_fuente,$texto)

    Getimagesize puede resultar muy utll para scripts de tratamiento autorratlco de il'TlClgenes. Por otrolado, imagettfbbox resulta ser muy practice para el centrado y posicionamiento de textos al mismotiempo que puede servirnos en botones dinarricos para definir el tamafio de la imagen en funcion deltamafio del texto que vayamos a introducir.Funciones graficas

    Funcion Descripcionimagecolorallocate Define un color en escala RGB

    imagecolorat

    Sintaxis$rojo = imagecolorallocate($im, 255, 0, 0)

    Define el color a partir del color presente en un scolor = imagecoloratpunto sx, $y ($im, sx, $y)Define un color scol de la paleta como scoltrans =

    imagecolortransparent transparente y Ie asigna un nuevo identificador imagecolortransparent$col_trans ($im, $col)Traza un arco 0 elipse de centro sx, $y, deejes horizontal y vertical de $h y $vrespect ivamente, anqulos inicial y final de $i y$f y color scol

    imagearc imagearc($im, sx, $y, $h ,sv, $i, $f, scol)

  • 5/9/2018 Biblioteca grafica GD

    4/6

    image lineimage polygon

    imagefilledpolygonimage recta ngle

    imagefilledrectangleimagesetpixel

    imagecopyresized

    imagefillimagefilltoborder

    imagestring

    imagettftext

    Traza una linea definida por dos puntosTraza un poligono de sn puntos cuyascoordenadas son definidas por el array scoord

    imageline($im, $x1, $y1,~~lp04~gon($im,scoord., $n, scol)

    Dibuja un poligono coloreado de $n puntos imagefilledpolygon($im,definidos como coordenadas en el array scoord scoord., $n, scot)Traza un rectanqulo definido por lascoordenadas de dos esquinas diagonalesDibuja un rectanqulo coloreado definido por lascoordenadas de dos esquinas diagonalesDibuja un pixel de color $col

    imagerectangle($im, $x1,$y1, $x2, $y2, scol)imagefilledrectangle($im,$x1, $y1, $x2, $y2, scol)imagesetpixel ($im, sx,$y, scol)

    Copia una superficie de una imagen origen$im_or y 10pega en una imagen destino $im_de. lmagecopyresized($im_de,La imagen es tomada en forma de rectanqulo $im_or, $x_de, $y_de,de anchura s a y altura $h a partir de la esquina $x_or, $y_or, $a_de,(sx, $y) y es pegada del mismo modo en su $h_de, $a_or, $h_or)destino.Colorea una superficie con color $colColorea una superficie definida por un color$col1 con un color $col2Escribe un texto $texto con una fuente detamafio $tallaEscribe un texto $texto de talla $talla con unafuente True Type cuyo nombre de archivo es$file con un anqulo $angulo

    imagefill ($im, sx, $y,scol)imagefilltoborder ($im, sx ,$y, $coI1, $coI2)imagestring ($im, $talla,s x, s v, $texto, $col)imagettftext ($im, $talla,$angulo, $x, sv, $col,$file, stexto)

    Como ya hemos dicho, esta lista no pretende ser exhaustiva sino mas bien mostrar las posibilidadesque esta biblioteca nos ofrece a la vez que nos sirve para tener las funciones mas importantesresumidas al alcance de la mano.

    Creaci6n de imagenes dlnamlcas con PHP IVEI ejemplo mas clasico de proqrarracion con funciones GD es la creacion de un boton dinamico. Unboton dinamco no es mas que un enlace qrafico en el que la imagen contiene un texto, que nosotrosdefinimos, adornado con cualquier otro elemento estetlco,Aqui os presentamos el script para comentarlo a contlnuaclon:

  • 5/9/2018 Biblioteca grafica GD

    5/6

    imagefill( $im,O,O,$t ranspa rente);//Generamos los areas lateralesimageare ($im, 7,7,12,12,90, 150,$rojo);imageare ($im, 7,7,12, 12,210,270,$rojo);imageare ($im, 7,7,11,11,90, 150,$rojo);imageare ($im, 7,7,11, 11,210,270,$rojo);imageare($im,$ancho-7, 7,12, 12,270,330,$rojo);imageare($im,$ancho-7, 7,12, 12,30,90,$rojo);imageare($im,$ancho-7, 7,11, 11,270,330,$rojo);imageare($im,$ancho-7, 7,11, 11,30,90,$rojo);//Generamos las lineas rojasimagerectangle($im, 7, r.sancho/z- 3,2,$rojo);imagerectangle($im, 7, 12,$anc ho/2- 3, 13,$rojo);imagerectangle($im,$anc ho/2+3, r.sancho- 7,2,$rojo);imagerectangle($im,$anc ho/2+3, 12,$anc ho- 7, 13,$rojo);//Generamos los rectangulos de los cuadrantesimagefilledrectangle($im,$anc ho/2-1,0,$anc ho/2+ 1,3,$oscuro);imagefilledrectangle($im,$anc ho/2-1, 11,$anc ho/2+ 1,14,$osc uro);imagefilledrecta ngle( $im,0,6, 3,8, sosc uro):imagefilledrectangle($im,$anc hO-4,6,$anc ho-1,8,$osc uro);//Sacamos el textoimagettftext ($im, 6,0,8, s.sosc uro, "fuente. TTF",$mensaje);//Mostramos el grafico en pantallaimagepng($im);//Liberamos memoriaimagedestroy($im) ;?>

    Como puede verse la proqrarraclon no resulta en absoluto complicada. EI punto que reviste un pocomas de atencion es la definicion de las coordenadas de cada figura trazada en funcion de lasdimensiones del texto.La primera operaclon antes siquiera de crear la imagen es evaluar el tamafio del texto que vamos acolocar de manera a ajustar el ancho del qrafico que sera funcion obviamente de la longitud delmensaje. Este calculo se realiza con la funclon imagettfbbox que nos proporclonara un array de ochoelementos correspondientes a las coordenadas de las cuatro esquinas de un rectanqulo imaginarioque engloba dicho texto. Teniendo en cuenta las coordenadas x de una esquina de la izquierda yotra de la derecha obtenemos el ancho del texto al que sumaremos unos pixeles para poder dibujarsu entorno.Una vez definido el ancho, podemos crear la imagen y a contlnuacion definir los colores. Los coloresson definidos en escala RGB 1 0 cual quiere decir que tenemos que hacer nuestras mezclas de rojo,verde y azul expresando la contrlbuclon de cada uno de estes colores a partir de un nurrero queoscila entre 1 y 255. Asi, por ejemplo, el rojo seria 255,0,0 y el negro se definiria como un 0,0,0. Unaforma sencilla de definir estes colores sin complicarse mucho la vida es recurrir a un programa dedisefio grafico (Photoshop por ejemplo) donde podreis encontrar facilrrente una paleta de coloresque este expresada de esta forma.A notar que, para que el dibujo pueda ser mostrado sobre cualquier color de fonda que no seablanco. definimos el color blanco como transoarente oor medio de la funcion imeaecolortrensoerent,

  • 5/9/2018 Biblioteca grafica GD

    6/6

    A contlnuaclon pasamos a generar el entorno donde emplazaremos el texto. Unos cuantos areas yrectanqulos nos daran el efecto deseado. EI punto mas delicado es, como hemos dicho, definir lascoordenadas de estas figuras a partir de la variable $ancho que nos define el tamafio del grafico.Con nuestro esqueleto creado ya solo nos queda introducir el texto, mostrar el dibujo y liberar lamemoria empleada para su creacion, Por supuesto, junto a este script, es necesario incluir el archivo.TTF correspondiente al tipo de letra que empleamos.

    Autores del manual:Hay que agradecer a diversas personas la dedlcaclon prestada para la creaclon de este manual. Susnombres junto con el nurrero de artfculos redactados por cada uno son los siguientes:

    Ruben AlvarezRedactor de DesarrolioWeb.comhttp://www.desarrolloweb.com(4 capftulos)

    Todos los derechos de reproduccion y difusion reservados a Guiarte Multimedia S.L.

    http://www.desarrolloweb.com/http://www.desarrolloweb.com/