Le immagini sono un elemento fondamentale del layout di un sito. Su questo non ci sono dubbi.
Finché dobbiamo gestirle noi, in qualità di programmatori, i problemi si riducono al minimo: creiamo le immagini, le ritagliamo come si deve e le mettiamo online.
Ma cosa fare quando l’upload delle immagini è lasciato all’utente e si ha la necessità di ridimensionarle al volo?
Vi sarà capitato centinaia di volte di spiegare all’utente che le immagini vanno caricate «entro una certa dimensione» e di ritrovarvi, poi, a gestire immagini sproporzionate.
Fortunatamente esistono degli script già pronti che si occupano per noi di questi problemi – e lo fanno in modo eccellente, lasciandoci una buona libertà di azione e di personalizzazione. Sto parlando nello specifico di SmartImage, una classe integrabile nei nostri siti internet.
La sua gestione non è proprio immediata, ma è solo questione di prenderci le misure. Ne faccio uso da diverso tempo e, ve l’assicuro, una volta capito il meccanismo non vorrete più abbandonarla.
SmartImage è scaricabile gratuitamente online (per esempio a questo indirizzo). Troverete comunque la classe completa nel file zip qui sotto, nel quale avrete a disposizione tra l’altro un esempio di utilizzo.
In un altro articolo faremo un passo avanti e vedremo come ritagliare delle immagini su misura (sempre con SmartImage).
Scaricatevi lo zip, quindi procedete con la lettura. Vediamo qualche operazione elementare, e cioè come ridimensionare al volo un’immagine di cui si è fatto l’upload.
La versione a cui faccio riferimento è SmartImage 0.8.9. Al momento la classe è arrivata alla versione 0.9.6, ma le funzionalità di base restano le stesse.
Download script
L’uso della classe: ritagliare con o senza proporzioni
Poniamo che l’utente abbia fatto l’upload di un’immagine da un form, usando un comune campo input di tipo “file”. Il suo nome, passato poi nel post, è “foto”.
I commenti dovrebbero essere abbastanza chiari da capire il procedimento.
In parole brevi, creiamo l’oggetto $img
con il quale potremmo richiamare le funzioni interne alla classe.
La funzione resize()
si occupa di ridimensionare l’immagine passata. Nella sua forma base vi basta inserire larghezza e altezza. Il terzo parametro (non obbligatorio) se impostato a “true” indica di ritagliare effettivamente l’immagine alle dimensioni impostate. Se invece è impostata a “false” (o lasciato vuoto) ridimensiona l’immagine senza perdere informazioni..
La funzione saveImage()
specifica dove salvare la nuova immagine ridimensionata e con quale nome. Un eventuale secondo parametro permette di specificare la percentuale di risoluzione rispetto all’originale.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
if(isset($_FILES['foto']['name']) and $_FILES['foto']['name']!=""){ include("SmartImage089/SmartImage.class.php"); //importo la classe di smartimage $upload_dir="img"; //cartella dove salvare le immagini //tolgo dal nome file i caratteri non consentiti $arr=array(); $arr[]="'"; $arr[]="\\"; $file_name=.str_replace($arr, "", $_FILES['foto']['name']); $file_name=str_replace(".jpg", "", $file_name); //Ridimensionare un'immagine mantenendo le proporzioni e ottimizzando la risoluzione all'85% $img=new SmartImage($_FILES["foto"]["tmp_name"]); $img->resize(100, 90); $img->saveImage($upload_dir."/".$file_name."-proporzionata.jpg"); //Esempio più avanzato: //ridimensionare un'immagine tagliandola alle dimensioni esatte (50x50 px) e ottimizzando la risoluzione all'85% $img=new SmartImage($_FILES["foto"]["tmp_name"]); $img->resize(50, 50, true); $img->saveImage($upload_dir."/".$file_name."-ritagliata.jpg", 85); } |
Adesso che avete a disposizioni le basi per l’uso di SmartImage, per esigenze più specifiche potete dare un’occhiata alla pagina citata a inizio articolo.
salve, sto utilizzando questo codice. volevo sapere alcune cose: se carico immagini di alta risoluzione funziona lo stesso? riesco a mantenere, una volta ridimensionata l’immagine, un peso della stessa espressa in kilobyte? se utilizzo un upload multiplo come impllemento il tutto?
Salve Roberto,
se imposti la qualità al 100% (invece che all’85 come nell’esempio sopra) non dovresti avere nessuna perdita. Ovviamente il peso in kb cambierà se ridimensioni l’immagine in una con altezza e larghezza diverse dall’originale.
Per l’upload multiplo, ti basta semplicemente applicare la funzione ricorsivamente a tutte le immagini passate (per esempio in un foreach).