L’arte di elaborare l’immagine con php (Parte1)

Ma come fanno i siti con stock di foto a mettere la loro texture sopra ogni fotografia caricata? Come fa Google+ a sfocare la foto che imposto come copertina del mio profilo?

Senz’altro avranno a disposizione qualche particolare tecnologia!!

E invece no. Non tutti sanno che è possibile manipolare le immagini usando “semplicemente” php. Oggi impareremo le nozioni base per elaborare l'immagine con php.

Gli strumenti necessari

Non tutti sanno che quasi ogni server mette a nostra disposizione GD imaging (Documentazione su php.net), che nelle mani giuste risulta essere davvero uno strumento potente. Per prima cosa dobbiamo verificare che sia attivo sul server che stiamo utilizzando. Per farlo andremo a creare un file index.php con al suo interno la funzione:
[crayon-534fec190588c134017528/]
Raggiungendo con un browser la posizione del file avremo una pagina che ci elenca tutte le informazioni legate al php, compresi i servizi attivi, in questa pagina dobbiamo accertarci di trovare la seguente sezione:

Da qui possiamo verificare se GD è attivo o meno, ed anche di quali funzionalità possiamo disporre. Se non è disponibile ed abbiamo la possibilità ed i permessi per installarlo possiamo seguire la guida ufficiale su php.net: http://www.php.net/manual/en/image.installation.php

Muoviamo i primi passi

Diciamo subito che è buona norma abilitare il report degli errori (almeno in fase di sviluppo) in questo modo sarà più semplice identificare e risolvere eventuali problemi.

Per farlo basterà scrivere in cima al nostro file php:

[crayon-534fec190589a511568609/]
Prima di iniziare la nostra opera d’arte, dovremmo sapere ancora due cose. In primo luogo è necessario definire il content-type corretto del file, se ad esempio stiamo creando un png dovremmo impostare l’header come segue:
[crayon-534fec19058a0089739042/]
Inoltre dovremmo tenere presente che alla fine delle operazioni sulla nostra immagine dovremmo definire e stampare la stessa. Quindi continuando con l’idea di creare un file png andremo a scrivere:
[crayon-534fec19058a5982044196/]
Dove $immagine è l’oggetto contenente tutte le informazioni legate alla nostra immagine. Il nostro file somiglierà quindi a questo:
[crayon-534fec19058aa826826023/]

 Impariamo a disegnare

Ora che siamo pronti ad iniziare disegneremo un quadrato grigio, per prima cosa creeremo l’oggetto immagine, poi lo coloreremo di grigio:
[crayon-534fec19058b0375077127/]
Il risultato a questo punto sarà un quadrato grigio di 250X250px. Possiamo usare la funzione imagecolorallocate() per definire colori da usare in seguito:
[crayon-534fec19058b5031177325/]
Altre funzioni interessanti sono imagepolygon() e imagefilledpolygon() che ci permettono di disegnare un poligono partendo da un array contenente le coordinate dei nostri punti. La funzione richiede 4 attributi:

1. l’oggetto immagine
2. l’array contenente le coordinate dei punti
3. il numero di punti
4. il colore

[crayon-534fec19058ba006726924/]
ed il risultato è il seguente:

Se invece usiamo imagefilledpolygon() otterremo un poligono riempito del colore scelto:

Divertendoci ad inserire altri punti il nostro file php potrebbe arrivare ad assomigliare a questo:
[crayon-534fec19058bf445315995/]
il cui risultato ci farà sorridere:

Impariamo a scrivere

Come i bambini, prima impariamo a disegnare poi a scrivere. Per prima cosa dobbiamo procurarci il file ttf del font che vogliamo usare. in questo caso useremo OpenSans-Regular, i cui file possiamo scaricarli direttamente da Google Fonts (http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans). Nel nostro esempio andremo a posizionare il file direttamente nella root del nostro progetto, per cui imposteremo la path dei font e lo definiremo come segue:

[crayon-534fec19058c6131311050/]
Ovviamente possiamo definire diversi font, l’importante è avere il relativo file ttf caricato all’interno della path impostata.

Ora useremo imagettftext() per inserire il testo “WEBHOUSE”, questa funzione richiede ben 8 attributi:

1. l’oggetto immagine
2. la dimenzione del carattere
3. l’angolazione del testo
4. la coordinata X
5. la coordinata Y
6. il colore
7. il font
8. la stringa contenente il testo da inserire

e quindi scriveremo:
[crayon-534fec19058cb888457781/]
Ottenendo quindi:

La prossima volta impareremo a tagliare e aggiungere filtri alle nostre immagini o foto.

Puoi scaricare l’esempio completo qui: logo_webhouse

L’arte di elaborare l’immagine con php (Parte1) - Webhouse.