Manipolazione di immagini in PHP utilizzando GD

Internet sarebbe piuttosto noioso senza immagini. Tuttavia, mantenere e manipolare centinaia o migliaia di immagini per il tuo sito web può essere un problema. Man mano che la progettazione del sito cambia, potresti dover modificare tutte le tue immagini, ad esempio potresti dover convertire tutte le immagini in gradazioni di grigio o ridimensionarle al 50% delle loro dimensioni originali. Potresti anche voler comprimere o ritagliare immagini diverse. Fare questo manualmente è dispendioso in termini di tempo e soggetto a errori, ma con un po 'di conoscenza della programmazione può essere automatizzato.

In questo tutorial, imparerai a conoscere la libreria GD (Graphic Draw) in PHP. Vedrai come questa libreria può essere utilizzata per manipolare le immagini ridimensionandole, tagliandole, ruotandole o filtrandole.

Cos'è GD?

PHP può fare molto di più che servire semplicemente HTML ai visitatori. Ad esempio, ha la capacità di manipolare le immagini. Non solo, ma è anche possibile creare le proprie immagini da zero e quindi salvarle o servirle agli utenti.

PHP può gestire quasi tutte le esigenze di manipolazione delle immagini di base utilizzando la libreria GD, abbreviazione di Graphic Draw. 

Impostare

Se stai lavorando su Windows, puoi includere il php_gd2.dll file come estensione in php.ini. Se stai usando qualcosa come XAMPP, troverai il php_gd2.dll file nella directory xampp \ php \ ext. Puoi anche verificare se GD è installato sul tuo sistema usando la funzione phpinfo ();. Se si scorre l'output risultante, si troverà qualcosa di simile al seguente.

È inoltre possibile visitare i requisiti e le pagine di installazione per ulteriori informazioni sul processo di installazione.

Creare immagini usando PHP GD

Il primo passo verso la manipolazione delle immagini tramite PHP è il loro caricamento in memoria come risorsa immagine. Questo può essere ottenuto utilizzando diverse funzioni per diversi formati. Tutte queste funzioni hanno nomi molto simili, quindi sono facili da ricordare.

Crea una nuova immagine

Il imagecreatetruecolor () la funzione si rivelerà utile se non si dispone di una fonte di immagine originale che si desidera manipolare. Accetta due parametri interi: una larghezza e un'altezza. Restituirà una risorsa immagine se tutto è andato come previsto. La risorsa immagine restituita è fondamentalmente un'immagine nera con larghezza e altezza specificate.

Carica un file di immagine

Se stai pianificando di manipolare immagini che sono già memorizzate da qualche parte, potrai trarre vantaggio dall'uso di funzioni come imagecreatefromjpeg (), imagecreatefrompng (), e imagecreatefromgif (). Questi creeranno una risorsa immagine con tutti i dati dal file immagine caricato. Queste funzioni accettano un singolo parametro che specifica la posizione dell'immagine che stai caricando come URL o come percorso del file.

Crea un'immagine da una stringa

La libreria GD ti consente anche di creare immagini da una stringa usando il imagecreatefromstring () funzione in PHP. Ricorda che dovrai usare base64_decode () prima sulla stringa data imagecreatefromstring (). La funzione può rilevare automaticamente se il tipo di immagine è JPG, PNG, GIF o un altro formato supportato.

Ruota, ridimensiona, ritaglia e capovolgi un'immagine

Alcune operazioni comuni che potresti voler eseguire su una risorsa immagine sono rotazione, ridimensionamento, ritaglio e ribaltamento.

Rotazione

Puoi ruotare un'immagine che hai già caricato nello script usando il imagerotate () funzione. Ruoterà l'immagine all'angolo fornito usando il centro dell'immagine come centro di rotazione. L'angolo viene fornito come valore float e PHP lo considera come il valore in gradi per la rotazione. 

A volte, l'immagine ruotata avrà dimensioni diverse rispetto alla versione originale. Ciò significa che finirai con un'area scoperta dopo la rotazione. Il terzo parametro del imagerotate () la funzione può essere utilizzata per specificare il colore di sfondo dell'area vuota dopo la rotazione.

scalata

È molto semplice scalare un'immagine usando la libreria GD. Devi solo passare la risorsa immagine così come la larghezza e l'altezza al imagescale () funzione. Se si omette l'altezza, GD ridimensiona l'immagine alla larghezza specificata mantenendo le proporzioni. 

È anche possibile specificare la modalità per ridimensionare l'immagine. Può essere impostato su IMG_NEAREST_NEIGHBOUR, IMG_BILINEAR_FIXED, IMG_BICUBIC, ecc. Una cosa importante che devi ricordare è che questa funzione restituisce una nuova sorgente di immagini in scala invece di modificare quella originale.

ritaglio

Puoi ritagliare qualsiasi risorsa immagine usando il ImageCrop () funzione in GD. Il primo parametro è la risorsa immagine originale e il secondo parametro è un array associativo con le chiavi X, y, larghezza, e altezza, specificando la posizione e le dimensioni della finestra di ritaglio.

L'immagine della farfalla qui sopra è stata ritagliata usando il seguente codice:

$ im_php = imagecreatefromjpeg ('percorso / a / immagine'); $ size = min (imagesx ($ im_php), imagesy ($ im_php)); $ im_php = imagecrop ($ im_php, ['x' => $ size * 0.4, 'y' => 0, 'width' => $ size, 'height' => $ size]); $ im_php = imagescale ($ im_php, 300);

Fondamentalmente, memorizziamo la lunghezza del lato più piccolo nel $ dimensioni variabile. Questa variabile viene quindi utilizzata per definire il limite del nostro rettangolo di ritaglio. Infine, l'immagine viene ridimensionata in modo tale che sia larga solo 300 pixel e lunga. Questo ci dà un'immagine quadrata di dimensioni adeguate.

Sfogliando le immagini

Le immagini possono essere capovolte orizzontalmente, verticalmente o in entrambe le direzioni usando il imageflip () funzione. Accetta la risorsa immagine che si desidera capovolgere come primo parametro e la modalità flip come secondo parametro. La modalità flip può essere impostata su IMG_FLIP_HORIZONTAL, IMG_FLIP_VERTICAL, o IMG_FLIP_BOTH.

L'immagine in alto a sinistra nella figura sopra è l'originale. L'immagine in alto a destra è stata creata usando IMG_FLIP_HORIZONTAL, l'immagine in basso a sinistra è stata creata usando IMG_FLIP_VERTICAL, e l'immagine in basso a destra è stata creata usando IMG_FLIP_BOTH. (L'immagine del corvo è di Pixabay.)

Applicazione di filtri a un'immagine

GD ha anche molto utile ImageFilter () funzione che può applicare filtri su diverse risorse di immagine caricate utilizzando le funzioni delle immagini precedenti. Questa funzione può accettare vari parametri a seconda del filtro che stai applicando.

Per i principianti, specifica la risorsa immagine e il nome del filtro che desideri applicare. Puoi impostarlo su uno dei 12 tipi di filtro predefiniti menzionati nei documenti. 

  • IMG_FILTER_NEGATE: inverte i colori nell'immagine
  • IMG_FILTER_GRAYSCALE: rimuove il colore dall'immagine
  • IMG_FILTER_BRIGHTNESS: rende l'immagine più luminosa o più scura
  • IMG_FILTER_CONTRAST: aumenta il contrasto dell'immagine 
  • IMG_FILTER_COLORIZE: tinge l'immagine su un colore selezionato
  • IMG_FILTER_EDGEDETECT: evidenzia i bordi dell'immagine
  • IMG_FILTER_EMBOSS: simile al rilevamento dei bordi, ma conferisce a ciascun bordo un aspetto rialzato
  • IMG_FILTER_GAUSSIAN_BLUR: sfoca l'immagine usando il metodo gaussiano
  • IMG_FILTER_SELECTIVE_BLUR: sfoca l'immagine usando il metodo selettivo
  • IMG_FILTER_MEAN_REMOVAL: un effetto per creare un'immagine stilizzata
  • IMG_FILTER_SMOOTH: uniforma i bordi frastagliati nell'immagine
  • IMG_FILTER_PIXELATE: trasforma l'immagine in pixel 

Alcuni filtri come NEGARE, GRAYSCALE, EDGE_DETECT e EMBOSS non hanno bisogno di dati aggiuntivi. Altri filtri, come LUMINOSITÀ, CONTRASTO e LISCIO, può accettare un parametro aggiuntivo che specifica la quantità di luminosità, contrasto o levigatezza dell'immagine finale. Il Effetto pixel parametro consente di specificare due parametri aggiuntivi: la dimensione del blocco e la modalità di pixelizzazione. Finalmente, il colorize filtro accetta quattro parametri che determinano i valori per i componenti rosso, verde e blu, nonché il canale alfa.

L'immagine in alto a sinistra è l'originale. L'immagine in alto a destra è stata creata usando il colorize filtro, in basso a sinistra è stato creato utilizzando il GRAYSCALE filtro, e l'immagine in basso a destra è stata creata usando il LUMINOSITÀ filtro. (Questa immagine della farfalla è stata trovata su Pixabay.)

Altre utili funzioni di manipolazione delle immagini

Dovresti anche conoscere alcune altre funzioni GD comuni che tornano utili ogni tanto.

Ottieni dimensioni dell'immagine

È possibile determinare la larghezza e l'altezza di una risorsa immagine utilizzando imagesx () e imagesy () funzioni.

Un'altra funzione chiamata getimagesize () può anche essere usato per ottenere la larghezza e l'altezza di un'immagine insieme al suo tipo. Questa funzione restituisce una matrice con elementi che specificano la larghezza, l'altezza e il formato dell'immagine. I primi due elementi dell'array descrivono la larghezza e l'altezza e il terzo elemento contiene una costante che specifica il formato del file: uno di IMAGETYPE_PNG, IMAGETYPE_GIF, eccetera.

Salvataggio di un'immagine

Una volta che hai apportato tutte le modifiche desiderate a un'immagine, molto probabilmente vorrai inviarla al browser o salvarla come file. In entrambi i casi, sarà necessario utilizzare una delle funzioni di output GD come imagejpeg (), imagepng (), o imagegif (). Passerai la risorsa immagine a una di queste funzioni di output e, se desideri salvare l'immagine in un file, specificerai anche un nome file. È anche possibile controllare la qualità dell'immagine di output utilizzando un terzo parametro opzionale a seconda del tipo di immagine.

Ridimensionamento di tutte le immagini in una directory

Applichiamo le conoscenze che abbiamo acquisito finora per fare qualcosa di pratico. In questa sezione, ridimensioneremo tutte le immagini JPEG in una particolare directory per avere una larghezza di 640 pixel. L'altezza verrà calcolata automaticamente in base alle dimensioni dell'immagine originale.

Salveremo le immagini ridimensionate in una nuova cartella intitolata Ridimensionato. Tutte le immagini originali in questo caso hanno le stesse dimensioni, ma il codice funzionerà correttamente con immagini che hanno dimensioni e proporzioni differenti.

$ directory = 'Natura /'; $ images = glob ($ directory. "*. jpg"); foreach ($ immagini come $ immagine) $ im_php = imagecreatefromjpeg ($ image); $ im_php = imagescale ($ im_php, 640); $ new_height = imagesy ($ im_php); $ new_name = str_replace ('- 1920x1080', '-640x'. $ new_height, basename ($ image)); imagejpeg ($ im_php, $ directory.'Resized /'.$ new_name); 

Nel codice sopra, iniziamo usando il glob () funzione per trovare tutte le immagini con a .jpg estensione nella directory intitolata Natura. I file di immagine sono archiviati in una matrice e li ciciamo su uno ad uno.

Dal momento che tutte le immagini che vogliamo ridimensionare sono JPEG, usiamo il imagecreatefromjpeg () funzione per caricarli nello script. Il imagescale () la funzione viene quindi utilizzata per ridimensionare l'immagine a una larghezza specifica di 640 pixel nel nostro caso. Non abbiamo specificato un'altezza fissa, quindi l'altezza verrà calcolata automaticamente.

Ognuno dei file di immagine originale aveva -1920x1080 aggiunto al nome del file per indicare le sue dimensioni. Noi usiamo str_replace () sul nome del file originale e sostituirlo -1920X1080 con la nuova dimensione dell'immagine.

Infine, salviamo le immagini ridimensionate in una cartella denominata Ridimensionato con i nuovi nomi di file. Puoi anche passare un terzo parametro al imagejpeg () funzione per impostare la qualità del file immagine salvato. Se il terzo parametro viene omesso, le immagini vengono salvate con una qualità predefinita di 75.

Applicare i filtri Scala di grigi e Contrasto su ogni immagine in una directory

Questa volta applicheremo due filtri diversi su ciascuna immagine nella nostra directory e salveremo il risultato finale in una directory diversa senza apportare modifiche al nome del file. Entriamo nel codice e spiegherò cosa farà in seguito ogni funzione.

$ directory = 'Natura /'; $ images = glob ($ directory. "*. jpg"); foreach ($ immagini come $ immagine) $ im_php = imagecreatefromjpeg ($ image); imagefilter ($ im_php, IMG_FILTER_GRAYSCALE); imagefilter ($ im_php, IMG_FILTER_CONTRAST, -25); $ new_name = basename ($ image); imagejpeg ($ im_php, $ directory.'Grayscale /'.$ new_name); 

Come puoi vedere, carichiamo le immagini dal Natura directory esattamente come abbiamo fatto per l'esempio precedente. Tuttavia, useremo il ImageFilter () funzione questa volta per applicare i filtri sulla risorsa immagine caricata. 

Notare che ImageFilter () modifica l'immagine originale e restituisce VERO o FALSE in base al successo o al fallimento dell'operazione. Questo è diverso dal imagescale () funzione che abbiamo usato nella sezione precedente, che ha restituito la risorsa immagine ridimensionata.

Un'altra cosa importante da tenere a mente è che il filtro di contrasto accetta valori compresi tra -100 e 100. I valori negativi implicano più contrasto e valori positivi implicano meno contrasto. Questo è l'opposto di ciò che alcune persone potrebbero aspettarsi! Un valore pari a 0 lascerà l'immagine invariata.

Il filtro di luminosità, d'altra parte, ha limiti minimi e massimi di -255 e 255. Il valore negativo in questo caso implica la luminosità minima e il valore positivo implica la massima luminosità.

Otteniamo il nome del file dal percorso del file usando il basename () funzione e quindi salvare l'immagine usando il imagejpeg () funzione.

Pensieri finali

Lo scopo di questo tutorial era di familiarizzare con la libreria GD in PHP e mostrarti come utilizzare tutte queste funzioni per semplificarti la vita. Puoi usare gli esempi alla fine del tutorial come guida per scrivere i tuoi script di manipolazione delle immagini. Ad esempio, puoi ridimensionare un'immagine solo se è più ampia di un limite determinato determinandone la larghezza usando il imagesx () funzione.

Tutte queste funzioni aprono molte possibilità per semplificare la manipolazione delle immagini e alla fine ti risparmiano un sacco di tempo. Se avete domande relative a questo tutorial, fatemelo sapere nei commenti.