18. Presentació de dades mitjançant imatges

Creació i inserció d'imatges efímeres

Un document de PHP pur pot crear una imatge efímera, que és inserida en un altre document. L'esquema bàsic és el següent:

identificador = imagecreatetruecolor(amplada, alçada);
...
instruccions sobre el contingut de la imatge
...
header("Content-type: image/jpeg");
imagejpeg(identificador);
imagedestroy(identificador);

La funció imagecreatetruecolor() crea una imatge sense contingut apta per a rebre tota mena de colors i transparències, sense limitació. La funció imagedestroy()allibera els recursos emprats en les operacions anteriors.

L'identificador introduït a la primera línia s'ha de mantenir com paràmetre en les funcions usades en la resta del programa.

A la penúltima línia, en comptes d'imagejpeg podem fer servir imagegif o imagepng; a l'avantpenúltima el paràmetre Content-type ha d'ésser coherent amb l'especificació triada.

La imatge així creada és inserida en el document portador de la mateixa manera que una imatge permanent:

<img src='nom.php' ... />

Definir colors

Abans d'incloure elements - fons, traços... - en una imatge nova, cal especificar els colors que s'hi faran servir. Cada color rep un nom, que es farà servir després per determinar el color de cada element. La definició dels colors es realitza amb la funció imagecolorallocatealpha(), que adopta la forma següent:

$nom_del_color = imagecolorallocate(identificador, r, g, b, alpha);

Els valors r, g i b indiquen les intensitats de vermell, verd i blau i s'expressen en format decimal amb valors de 0 a 255 o amb format hexadecimal amb valors entre 0x00 i 0xFF. El valor d'alpha s'expressa amb un nombre que va del 0 (opacitat total) al 127 (transparència total).

La variant imagecolorallocate() prescindeix de l'alpha, que fixa en 0.

Color de fons

El color de fons s'especifica amb la funció imagefill():

imagefill(identificador, x_esquerre, y_superior, nom_del_color);

El rectangle comprès entre la vora esquerra, la vora superior, x_esquerre i x_dret queda sense modificar.

Nota: les coordenades verticals tenen l'origen en la part superior, al contrari del que és habitual en matemàtiques.

Figures geomètriques

Hi ha una sèrie molt nombrosa de funcions que dibuixen elements geomètrics. Algunes de les més elementals són les següents:

Punt	imagesetpixel();	x, y
Recta	imageline();	x_inicial, y_inicial, x_final, y_final
Rectangle	imagerectangle();	x_inicial, y_inicial, x_final, y_final
Rectangle ple	imagefilledrectangle();	x_inicial, y_inicial, x_final, y_final
El·lipse	imageellipse();	x_centre, y_centre, eix_horitzontal, eix_vertical
El·lipse plena	imagefilledellipse();	x_centre, y_centre, eix_horitzontal, eix_vertical

Recordem que el quadrat és un cas particular del rectangle i la circumferència un cas particular de l'el·lipse.

En tots els casos l'ús de la funció respon al patró següent:

imageline(identificador, paràmetres específics, nom_del_color);

Document HTML portador de la imatge

<?php
$ctrl = imagecreatetruecolor(300,250); // Crea la imatge
$groc_clar = imagecolorallocate($ctrl,255,255,127); // Defineix un color
$verd = imagecolorallocate($ctrl,0,127,0);
$vermell = imagecolorallocate($ctrl, 240, 0, 10);
$blau_tr = imagecolorallocatealpha($ctrl,0,0,255,63); // Defineix un color parcialment transparent
ImageFill($ctrl,0,0,$groc_clar); // Fons de la imatge
imagerectangle($ctrl,3,3,297,247,$verd); // Rectangle buit per al marge
imagefilledrectangle($ctrl, 50, 50, 230, 125,$verd); // Rectangle ple
imagefilledellipse($ctrl, 200, 150, 140, 140,$blau_tr); // Cercle
imageline($ctrl, 20, 30, 280, 185, $vermell); // Línia recta fina
header ("Content-type: image/jpeg");
imagejpeg($ctrl);
imagedestroy($ctrl); // Allibera els recursos
?>

Vegeu-ne el resultat

Textos

Amb la funció imagestring() podem afegir cadenes de text a la imatge:

imagestring(identificador, mida_de_lletra, x_inicial, y_inicial, text, nom_del_color);

Les mides de lletra són 5, numerades de l'1 al 5.

El text es pot indicar mitjançant un literal o una variable.

Document HTML portador de la imatge

<?php
$dia = gmdate(j) ;
$mes = gmdate(m);
if ($mes == "01") {$mes = " de gener "; }
if ($mes == "02") {$mes = " de febrer "; }
if ($mes == "03") {$mes = " de març "; }
if ($mes == "04") {$mes = " d'abril "; }
if ($mes == "05") {$mes = " de maig "; }
if ($mes == "06") {$mes = " de juny "; }
if ($mes == "07") {$mes = " de juliol "; }
if ($mes == "08") {$mes = " d'agost "; }
if ($mes == "09") {$mes = " de setembre "; }
if ($mes == "10") {$mes = " d'octubre "; }
if ($mes == "11") {$mes = " de novembre "; }
if ($mes == "12") {$mes = " de desembre "; }
$any = "de " . gmdate(Y) ;
$text = $dia . $mes . $any; // Formació del text amb les dades suara obtingudes
$ctrl = imagecreatetruecolor(300,36); // Creació de la imatge
$blau = imagecolorallocate($ctrl,0,0,255); // Determinació del color
$blanc = imagecolorallocate($ctrl,255,255,255);
imagefill($ctrl, 0, 0, $blau); // Color de fons
imagestring($ctrl, 5, 30, 10, $text, $blanc); // Inserció del text
header ("Content-type: image/jpeg");
imagejpeg($ctrl);
imagedestroy($ctrl);
?>

Vegeu-ne el resultat

Imatges a partir de dades de formularis

La introducció de dades per l'usuari complica una mica les coses. D'una banda, un cop feta aquesta operació, hem de canviar al document portador de la imatge; de l'altra, hem de trametre les dades al document generador de la imatge. Una soluciió consisteix a tenir un document-pont que fa les dues comeses: converteix les dades del formulari en variables de sessió i a continuació, mitjançant un header, ens condueix al document portador de la imatge. Per la seva banda, el document generador de la imatge recull des dades de les variables de sessió.

Document HTML dotat d'un formulari.

<?php
session_start(); // Desem les dades com variables de sessió
$_SESSION['t1'] = $_POST['t1'];
$_SESSION['t2'] = $_POST['t2'];
$_SESSION['t3'] = $_POST['t3'];
$_SESSION['t4'] = $_POST['t4'];
header ("Location: 18g.htm"); // Canviem al document portador de la imatge
?>

Document HTML portador de la imatge generada.

<?php
session_start(); // Recull les varibles de sessió
$t1 = $_SESSION['t1'];
$t2 = $_SESSION['t2'];
$t3 = $_SESSION['t3'];
$t4 = $_SESSION['t4'];
$max = $t1; // A fi d'escalar la gràfica, quin és el valor més gran?
if ($t2>$max) { $max = $t2; }
if ($t3>$max) { $max = $t3; }
if ($t4>$max) { $max = $t4; }
$coef = 200 / $max; // El més gran tindrà 200 píxels
$ac1 = 200-round($t1 * $coef); // Calcula els límits superiors de cada barra
$ac2 = 200-round($t2 * $coef);
$ac3 = 200-round($t3 * $coef);
$ac4 = 200-round($t4 * $coef);
$ctrl = imagecreatetruecolor(100,200); // Crea la imatge
$blanc = imagecolorallocate($ctrl, 255, 255, 255); // Defineix dos colors
$verd = imagecolorallocate($ctrl,0,255,0);
imagefill($ctrl, 0, 0, $blanc); // Estableix el color de fons
imagefilledrectangle($ctrl, 2, $ac1, 23, 200,$verd); // Dibuixa cada una de les barres
imagefilledrectangle($ctrl, 27, $ac2, 48, 200,$verd);
imagefilledrectangle($ctrl, 52, $ac3, 73, 200,$verd);
imagefilledrectangle($ctrl, 77, $ac4, 98, 200,$verd);
header ("Content-type: image/jpeg"); // Instruccions finals
imagejpeg($ctrl);
imagedestroy($ctrl);
?>

Vegeu-ne el resultat