Questo tutorial vuole essere una prima semplice introduzione all’uso della libreria GD. Per chi non lo sapesse la libreria GD serve per la creazione di immagini tramite PHP. Le librerie GD sono infatti in grado di creare tramite semplice codice PHP numerosi tipi di immagini, quali jpeg, png, tiff ecc… Il supporto al formato gif è stato recentemente abolito, in quanto si tratta di un formato proprietario della Sun, mentre le librerie GD sono open source. Dalla versione 2.0.28 tale supporto è stato però ripristinato, e dalla versione 2.0.32 le librerie GD hanno anche la possibilità di creare gif animate.
L’utilità di questa libreria è enorme, basti pensare alla creazione di grafici o report in tempo reale, analizzando i dati da un database. Esistono poi varie librerie che appoggiandosi alla libreria GD forniscono funzioni aggiuntive e semplificate per la creazione di grafici, come ad esempio la libreria JpGraph, della quale però non ci occuperemo in questo tutorial.
Per prima cosa assicuratevi che sul vostro server la libreria GD sia installata: basta controllare che sia tra le librerie disponibili. Per fare ciò scrivete:
<?php
phpinfo();
?>
e salvate il file php. Quando eseguite il file avrete una tabella con tutte le caratteristiche del web server, di php e delle librerie disponibili.
Scriviamo ora un primo script per iniziare a prendere confidenza con la libreria GD:
<?php
header("Content-type: image/png");
// creo l'immagine
$img = imagecreate(100, 150);
// colore di sfondo
$back = imagecolorallocate($img, 255, 255, 255); // hex #FFFFFF
// rettangolo pieno
$rectColor = imagecolorallocate(187, 187, 187); // hex #BBBBB
imagefilledrectangle($img, 20, 20, 80, 130, $rectColor);
// stampa l'immagine
imagepng($img);
?>
Il colore
Analizziamo lo script soprastante. Con la chiamata imagecreate(100, 150) si crea la "base" per l’immagine, il rettangolo vuoto di dimensioni 100 (larghezza) per 150 (altezza) pixel. Su di esso si potrà disegnare utilizzando le funzioni fornite da PHP di interfaccia verso la libreria GD. Per definire un colore si utilizza la funzione imagecolorallocate, a cui deve essere passata l’immagine, creata precedentemente con imagecreate(), e i valori decimali corrispondenti ai colori RGB (rosso, verde, blu). Ricordiamo per inciso che un colore in esadecimale si indica con, ad esempio, #FFBB00. Dove i caratteri raggruppati a due a due corrispondono ai valori delle componenti RGB: quindi FF è il valore esadecimale per il rosso, BB per il verde e 00 per il blu. I corrispondenti decimali sono 255, 187, e 0. La funzione imagecolorallocate() utilizza proprio questi valori in sistema decimale. E’ molto importante notare che la prima chiamata di imagecolorallocate() definisce il colore di sfondo dell’immagine. Questa funzione restituisce un intero che identifica il colore. Questo intero può essere memorizzato in una vaiabile e passato ad altre funzioni per disegnare oggetti o testo di quel dato colore.
I poligoni, le ellissi e le linee
La chiamata imagefilledrectangle($img, 20, 20, 80, 130, $rectColor) disegna sull’immagine $img un rettangolo pieno. Il formato di questa funzione è imagefilledrectangle(resource image, int x1, int y1, int x2, int y2, int col), dove "resource image" è l’immagine su cui disegnare il rettangolo, "x1" e "y1" sono le coordinate dell’angolo superiore sinistro, "x2" e "y2" sono le coordinate dell’angolo inferiore destro e "col" è l’identificativo del colore. Allo stesso modo è possibile disegnare un rettangolo vuoto, usando la funzione imagerectangle(), che richiede gli stessi parametri. In questo caso il colore del rettangolo era stato definito precedentemente e salvato nella variabile $rectColor.
Così come abbiamo disegnato un rettangolo è possibile disegnare qualsiasi altro poligono utilizzando imagepolygon() o imagefilledpolygon() (per poligoni pieni), o un’ellisse usando imageellipse() o imagefilledellipse(). Usando imagearc() o imagefilledarc() è possibile inoltre disegnare solo una porzione dell’ellisse. Ovviamente per disegnare una circonferenza bisognerà disegnare un’ellisse con altezza e larghezza identiche.
Se invece vogliamo disegnare una semplice linea basterà utilizzare imageline().
Restituire l’immagine
Come avrete potuto notare la prima riga dello script invia al browser un’intestazione che specifica che si tratta di un’immagine. In particolare la chiamata header("Content-type: image/png") specifica al browser che i dati che sta ricevendo costituiscono un’immagine di tipo png. Potete usare image/jpeg per un’immagine jpeg o image/gif per un’immagine gif. Senza questa informazione il browser considererebbe i dati come codice HTML, e l’immagine non sarebbe interpretata come tale.
Al termine dello script la chiamata imagepng($img) crea l’immagine png vera e propria a la restituisce al browser. Esistono funzioni specifiche per i vari formati, come imagejpeg() e imagegif(). Se si passa a questa funzione un nome di file come secondo argomento l’immagine verrà salvata nel file specificato.
Il testo
Esistono alcune funzioni per disegnare del testo sulle immagini create tramite GD. La funzione più basilare è imagestring(). Vediamo un esempio:
<?php
header("Content-type: image/png");
// creo l'immagine
$img = imagecreate(100, 150);
// colore di sfondo
$back = imagecolorallocate($img, 255, 255, 255); // hex #FFFFFF
// testo
$textColor = imagecolorallocare(187, 187, 187); // hex #BBBBB
imagestring($img, 5, 20, 20, "Il mio primo testo!!", $textColor);
// stampa l'immagine
imagepng($img);
?>
Imagestring() accetta l’immagine, la dimesione del font, la posizione del testo dall’angolo superiore sinistro dell’immagine, il testo da scrivere e l’identificativo del colore del testo. Tuttavia questa funzione è un po’ "primitiva". E’ infatti molto più conveniente utilizzare imagettftext(), che permette di definire più parametri, come ad esempio la rotazione, e utilizzare i font TrueType. Inoltre con la funzione imagettfbbox() è possibile conoscere le dimensioni del box entro il quale il testo sarà scritto prima di disegnarlo: ciò è molto utile nel caso in cui si voglia ad esempio effettuare in tempo reale alcuni test per definire la dimensione massima di un dato testo affinchè questo rimanga entro certi limiti di dimensioni.
Con questo tutorial abbiamo cercato di smuovere la vostra curiosità verso una libreria molto potente e flessibile, con la quale, con un po’ di esperienza, si possono creare cose molto interessanti, come ad esempio grafici dettagliati e precisi. Oppure si possono creare miniature di immagini, cosa molto utile ad esempio per le web galleries. Per approfondire l’argomento vi invitiamo a sfogliare la documentazione ufficiale di PHP, in cui è riportata tutta la serie di funzioni disponibili per l’utilizzo della libreria GD con anche alcuni esempi pratici.