Come creare le thumbnail con la libreria GD
Nel precentente tutorial abbiamo visto come implementare la classe upload. In questo articolo vedremo come sviluppare la creazione delle miniature tramite il metodo createThumb, che avevamo commentato in quanto non ancora presente. Per farlo utilizzeremo la libreria GD.
La libereria GD é una potente ed ultilizzatissima estensione di PHP. Non fa parte delle funzioni base (non capisco perché vista la sua diffusione) e deve essere quindi abilitata a livello di server. La maggior parte degli hosting comunque la mette a disposizione.
Cosa posso fare con la libreria GD?
Grazie a GD, possiamo riprodurre la maggior parte delle principali funzioni messe a disposizione dagli editor di immagini che utilizziamo quotidianamente; possiamo infatti ridimensionare, ruotare, ritagliare, scrivere, fin’anche creare forme geometriche dal nulla.
Alla fine possiamo creare l’immagine fisicamente salvandola nel filesystem oppure anche inviarla al client settando l’header della richiesta HTTP e mandandola in output. In questo caso l’immagine non sarà salvata sul disco, ma semplicemente creata “on fly” nella memoria del server; ma comunque sarà inviata al client che la potrà visualizzare e salvare come una qualsiasi immagine.
Noi vedremo entrambi i metodi. In questo tutorial creeremo fisicamente le thumbnail delle immagini. Nel prossimo visualizzeremo l’immagine a dimensione reale con il watermark creandola al volo.
Come creare un’immagine?
La prima cosa che dobbiamo fare é creare una nuova immagine indicandone la dimensione. Questa operazione é l’equivalente di creare un nuovo file con photoshop.
Ovvero viene semplicemente creato lo spazio fisico che conterrà poi l’immagine.
Con GD questa operazione viene svolta dalle funzioni imagecreate() o imagecreatetruecolor(), che ritornano il riferimento all’immagine.
Ora possiamo iniziare a sviluppare il metodo createThumb() che avevamo invocato alla fine del metodo onSuccess() (nel file upload_process.php) dopo avere salvato nel database le informazioni sull’immagine.
Creare le thumbnails
Per creare le nostre thumbnails, prenderemo una scorcatoia. Invece di creare un’immagine vuota come abbiamo appena visto per poi inserirci l’immagine, apriremo direttamente l’immagine stessa. Per farlo, GD ci mette a disposizione le funzioni imagecreatefrom…..(percorso), che sono l’equivalente di aprire un’immagine esistente con photoshop. Con l’unica grana che dobbiamo conoscere l’estensione del file, infatti le funzioni sono imagecreatefrompng(), imagecreatefromgif(), eccetera.
Nella nostra gallery abbiamo deciso di ammettere unicamente le estensioni jpg e png. Dunque ci basterà fare un semplice controllo:
protected function createThumb() { if($this->extension == 'jpg') { $image = imagecreatefromjpeg($this->opt['uploadDir'] . $this->filename . '.' . $this->extension); } elseif($this->extension == 'png') { $image = imagecreatefrompng($this->opt['uploadDir'] . $this->filename . '.' . $this->extension); }
Come vedi invochiamo l’una o l’altra funzione a dipendenza dell’estensione del file e valorizziamo $image con il riferimento all’immagine aperta.
Ora, per fare un ridimensionamento proporzionale, dovremo conoscere le dimensioni dell’immagine. Le ricaveremo con facilità grazie alle funzioni imagesx() e imagesy().
$width = imagesx($image); $height = imagesy($image);
Prima di procedere ulteriormente facciamo una cosa elegante. Rendiamo configurabile la dimensione delle thumb e la cartella dove le salveremo.
Per farlo possiamo aggiungere questi dati all’array che passeremo al costruttore. Il fatto di utilizzare un’array associativo ci da infatti la massima liberà, e tutti i valori li ereditiamo dalla classe genitore all’interno dell’array $opt. Quindi riscriviamo l’array in questo modo:
$opt = array('uploadDir' => 'img/', 'allowedExtensions' => 'jpg,png', 'maxSize'=> 10000000, 'thumbSize' => 150, 'thumbDir' => 'thumb/');
Come vedi abbiamo definito una dimensione della thumbnail di 150px, intesa come dimensione del lato maggiore dell’immagine.
Dobbiamo ora calcolare un coefficiente di proporzione tale per cui il lato maggiore diventi 150 (o comunque quanto passato come parametro).
Per farlo basterà dividere la dimensione che desideriamo per la dimensione di ciascuno dei due lati dell’immagine originale, e scegliere il risultato minore.
$prop = min($this->opt['thumbSize']/$width, $this->opt['thumbSize']/$height);
Ora $prop conterrà il coefficiente che moltiplicheremo per ciascuno dei lati dell’immagine a dimensione reale, ottenendo le dimensioni della thumbnail.
$thumb_width = intval($prop*$width); $thumb_height = intval($prop*$height);
Ora creiamo una nuova immagine con le dimensioni ottenute:
$thumb = imagecreatetruecolor($thumb_width,$thumb_height);
Ed infine copiamo l’immagine originale in questa nuova immagine, utilizzando la funzione specifica per i ridimensionamenti imagecopyresampled().
imagecopyresampled($thumb,$image,0,0,0,0,$thumb_width,$thumb_height,$width,$height);
Il primo parametro é l’immagine nella quale vogliamo copiare l’immagine contenuta nel secondo parametro. Seguono quattro parametri che rappresentano le coordinate dove posizionare l’immagine. Infatti possiamo avere un’immagine di destinazione più grande, in questo modo possiamo posizionare l’immagine copiata all’interno di essa. Nel nostro caso non avrebbe senso ovviamente.
In seguito dobbiamo passare le dimensioni dell’immagine ridimensionata e quelle dell’immagine originale.
Ora la risorsa $thumb contiene la nostra thumbnail definitiva, che andremo a salvare in formato jpg nella cartella thumb.
imagejpeg($thumb,$this->opt['thumbDir'] . $this->filename . '-thumb.' . $this->extension,90);
Come vedi passiamo la risorsa ed in seguito il percorso ed il nome del file, che ho modificato aggiungendo -thumb (non era necessario in quanto risiede in una cartella diversa dall’immagine originale). L’ultimo parametro é la compressione jpg.
Ora il metodo createThumb() é completo. Puoi decommentarlo dal metodo onSuccess() e provare lo script.
protected function createThumb() { if($this->extension == 'jpg') { $image = imagecreatefromjpeg($this->opt['uploadDir'] . $this->filename . '.' . $this->extension); } elseif($this->extension == 'png') { $image = imagecreatefrompng($this->opt['uploadDir'] . $this->filename . '.' . $this->extension); } $width = imagesx($image); $height = imagesy($image); $prop = min($this->opt['thumbSize']/$width, $this->opt['thumbSize']/$height); $thumb_width = intval($prop*$width); $thumb_height = intval($prop*$height); $thumb = imagecreatetruecolor($thumb_width,$thumb_height); imagecopyresampled($thumb,$image,0,0,0,0,$thumb_width,$thumb_height,$width,$height); imagejpeg($thumb,$this->opt['thumbDir'] . $this->filename . '-thumb.' . $this->extension,90); }Download
Come visualizzare le thumb?
Visto che fino a qui é stata una passeggiata, avrai certamente ancora un po di energia per creare la pagina che visualizza le thumb e che permetterà di accedere alle immagini a dimensione reale.
Creiamo la pagina index.php e iniziamo ad intestare il documento in questo modo:
<!DOCTYPE html> <html dir="ltr" lang="it-IT"> <head> <meta charset="utf-8" /> <title>Gallery</title> <style> ul{list-style-type: none;} li{display: inline; padding: 40px;} </style> </head> <body>
Ora andiamo a ripescare nel database l’elenco delle immagini salvate e dichiariamo una lista.
include 'db_config.php'; $sql = "SELECT id,filename,ext FROM img"; $res = mysql_query($sql); echo '<ul> ';
Andiamo a scorrere i risultati collegando ogni thumbnail alla pagina large_w.php e passando l’id dell’immagine come parametro alla querystring:
while($im = mysql_fetch_object($res)) { echo '<li><a href="large_w.php?id=' . $im->id . '"><img src="thumb/' . $im->filename . '-thumb.' . $im->ext . '"></a></li> '; } echo '</ul> ';
La pagina large_w.php creerà al volo l’immagine a dimensione reale con il watermark in base all’id passato. Ma questo sarà argomento del prossimo tutorial.
DownloadConclusione
In questo tutorial abbiamo iniziato a sperimentare le potenzialità della libreria GD. La creazione di thumbnail ne é un’applicazione classica. Ora che sei avviato credo che non vedrai l’ora della prossima puntata.
3 commenti
Trackback e pingback
[...] precedente tutorial, abbiamo visto come creare i thumbnail delle immagini caricate. Ora vedremo come posare [...]