Con le ultime versioni dei browser, Internet Explorer incluso, è finalmente possibile sfruttare le potenzialità grafiche offerte dalle immagini PNG (acronimo per Portable Network Graphics).

Questo formato grafico esiste dal lontano 1995; da poco, però, si è imposto definitivamente come soluzione ideale per le aree di trasparenza di una pagina web, soppiantando le immagini GIF. La qualità estetica della trasparenza non è assolutamente paragonabile visto che, a differenza del formato GIF, è possibile definire il livello di opacità delle singole zone dell’immagine (grazie al canale Alpha), ottenendo risultati spesso entusiasmanti.

Oggi vedremo un breve set di istruzioni con il quale andare a generare dinamicamente immagini PNG (più o meno trasparenti) in modo davvero semplice, tramite PHP e le sue librerie GD (librerie che probabilmente troverete già installate sul server o sulla vostra installazione locale di test).

Il nostro obiettivo è creare un’immagine con uno sfondo di un colore unico (trasparente, semitrasparente oppure totalmente opaco). Aggiungeremo poi un testo a scelta, applicandogli un’ombra semitrasparente nera e posizionando il tutto al centro dell’immagine. Il testo, inoltre, sarà scritto con un font a nostro piacimento, di cui ci servirà semplicemente il file .ttf.

Il codice passo per passo

Vediamo le istruzioni necessarie per giungere al nostro obiettivo.

Innanzi tutto definiamo le variabili: il testo da scrivere e le dimensioni che avrà l’immagine.

Poi definiamo il font (indichiamo esattamente il nome del file .ttf, che nel nostro caso sarà posizionato nella stessa directory del file php), la dimensione del testo e l’angolazione (qui 0, quindi nulla).

Successivamente andiamo a calcolare, grazie alla funzione imagettfbbox lo spazio occupato dal testo. Alla funzione passiamo la dimensione del testo, l’angolazione, il font ed il testo. Abbiamo già definito tutto precedentemente.

Il risultato, la variabile $box_testo, è un array che contiene i seguenti 8 valori:
[0] angolo inferiore sinistro (X) - [1] angolo inferiore sinistro (Y)
[2] angolo inferiore destro (X) - [3] angolo inferiore destro (Y)
[4] angolo superiore destro (X) - [5] angolo superiore destro (Y)
[6] angolo superiore sinistro (X) - [7] angolo superiore sinistro (Y)

Con questi valori possiamo andare a definire la posizione che dovrà avere il riquadro di testo all’interno dell’immagine:

Ciò che abbiamo visto finora ci basterà per posizionare correttamente il testo. Ora passiamo alla vera e propria creazione dell’immagine. La prima riga da scrivere definisce un’immagine (la variabile $immagine) di larghezza e altezza specificate:

Passiamo alla definizione dei colori (con canale Alpha) che verranno utilizzati nell’immagine. Impostiamo il valore RGB indicandolo in formato esadecimale. Per questo esempio ci servono 3 colori: per lo sfondo, il testo e l’ombra del testo.

Impostiamo lo sfondo rosso (per ora totalmente opaco, successivamente varieremo la trasparenza); il testo bianco e l’ombra del testo nero con semi-trasparenza (valore 80 su 127).

Ora “riempiamo” l’immagine creata con il colore di sfondo, ed inoltre dichiariamo che la trasparenza del canale Alpha deve essere salvata nel risultato finale.

Per ora otteniamo semplicemente un rettangolo rosso (di 500 x 200 pixel):

Fatto ciò dobbiamo inseriamo il testo, partendo dalla sua ombra, visto che questa dovrà stare sotto al testo vero e proprio. Perciò utilizziamo la funzione imagettftext in questo modo:

Se ci fermassimo qui avremmo questo risultato:

Infine ripetiamo quanto visto sopra variando solamente il colore e togliendo il piccolo scostamento di 3 pixel (che ci consente di vedere l’ombra):

Non resta che visualizzare il risultato a video, in questo modo:

Se vogliamo invece salvare l’immagine PNG nella directory del file php, al posto delle 3 righe viste sopra dobbiamo mettere questa:

Una piccola variazione

Abbiamo visto come ottenere un’immagine con sfondo rosso. Se volessimo invece avere uno sfondo totalmente trasparente oppure semi-trasparente dovremmo variare solamente la riga dove abbiamo definito il colore di sfondo. Ecco come fare:

Riga originale (rosso – totalmente opaco – valore trasparenza 0 su 127):

Semitrasparenza (rosso – semi-trasparente – valore trasparenza 80 su 127):

Trasparenza (rosso – totalmente trasparente – valore trasparenza 127 su 127):

Codice completo

Infine ecco tutto il codice visto sopra (se fate copia-incolla, ricordatevi di sostituire gli apici e doppi-apici con quelli corretti per il codice php):

Ecco i link dove potete trovare i dettagli di tutte le funzioni utilizzate:
http://php.net/manual/en/function.imagettfbbox.php
http://php.net/manual/en/function.imagecreatetruecolor.php
http://php.net/manual/en/function.imagecolorallocatealpha.php
http://php.net/manual/en/function.imagefill.php
http://php.net/manual/en/function.imagesavealpha.php
http://php.net/manual/en/function.imagettftext.php
http://php.net/manual/en/function.imagepng.php
http://php.net/manual/en/function.imagedestroy.php

di Massimo Cinquini, Web Developer @ Voxart
→ Seguimi su Twitter oppure aggiungimi su Google Plus