Upload e resize delle immagini in PHP

Posted on aprile 24, 2011
Filed Under Gallery Immagini | Leave a Comment

Nel presente articolo mostriamo come permettere agli utenti il caricamento di un’immagine in piu’ formati, ridimensionarla una volta caricata in maniera automatica e visualizzarla a video.

L’articolo ha lo scopo di permettere all’utente il caricamento delle classiche foto fatte da fotocamere e smartphone con qualita’ elevata che occupano diversi Megabyte di spazio per ridurle in maniera automatica a dimensioni Web compliant (800×600 – 640×480 etc. etc.). In questo modo oltre a ridurre le dimensioni dell’immagine si riducono i tempi di caricamento della pagina cosi’ da permettere una navigazione piu’ rapida agli utenti ed una migliore visibilita’ sui motori di ricerca visto che la velocita’ di caricamento delle pagine e’ uno dei fattori SEO molto importanti per avere un buon risultato.

L’articolo puo’ servire come base per creare applicazioni piu’ strutturate che permettono all’utente anche la scelta della porzione di foto da utilizzare tramite soluzioni in AJAX o caricamenti multipli di immagini e documenti ed altre applicazioni per numerosi scopi.Andiamo a creare una nuova pagina HTML contenente il modulo per l’upload delle immagini, questo il codice della pagina che chiameremo uploadImg.html:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Upload e resize immagini in PHP</title>
</head>
<body>
<form method=”post” enctype=”multipart/form-data” name=”modulo” action=”uploadImmagini.php“>
<input type=”file” name=”immagine” size=”20″></form>
<input type=”submit” value=”Carica Immagine >>” />
</form>
</body>
</html>

Poniamo particolare attenzione al tipo di encode (multipart/form-data), allo script in PHP che andremo a richiamare una volta che clicchiamo sul pulsante con etichetta “Carica Immagine >>” che, nel nostro esempio, si chiama uploadImmagini.php. Il tipo di elemento da inserire nel form e’ file. Allo stesso livello della pagina HTML creiamo la cartella immagini.

A questo punto apriamo la pagina appena salvata con un qualunque browser che ci mostrera’ a video un campo di testo con il tasto sfoglia ove scegliere l’immagine da caricare all’interno del nostro hard disk ed un pulsante per completare il caricamento dell’immagine una volta scelta.
Obs.: Non e’ sufficiente fare doppio click da locale sulla pagina HTML appena creata perche’ mentre vedremo tranquillamente la pagina di caricamento dell’immagine poi non potremo caricare l’immagine perche’ non c’e’ nessun server che supporti PHP (consigliamo EasyPHP, Xampp o un qualunque spazio server ove caricare i file e la cartella immagini necessari al funzionamento)

Questo il codice della pagina uploadImmagini.php:
<?php
// Caricamento foto…
$nomePostFoto    = “immagine”;    // Nome del campo presente nel form di caricamento
$pathImg        = “immagini/”;    // Path cartella imamgini
$id                = “1″;            // Nome immagine (eventualmente da generare in maniera pseudocasuale)
$wi                = 250;            // Max larghezza possibile
$allowedExtensions = array(“jpg”,”jpeg”,”gif”,”png”);    // Estensioni ammesse

isset($_FILES[$nomePostFoto]['name']) ? $nomeFoto = addslashes($_FILES[$nomePostFoto]['name']) : $nomeFoto = “”;
if (strlen($nomeFoto)>0)
{
// Caricamento permesso ?…
$caricaFoto = “NO”;
$nomeFotoUno = basename($_FILES[$nomePostFoto]['name']);
if (strlen($nomeFotoUno) > 0)
{
$parts = explode(‘.’,$_FILES[$nomePostFoto]['name']);
$ext = strtolower(end($parts));
if (!in_array($ext,$allowedExtensions))
echo(“<br><br><br><div align=’center’>”.$_FILES[$nomePostFoto]['name'].” ha una estensione non consentita (PNG, JPG, JPEG, GIF) e non e’ stato caricato!</div><br><br/>”);
else
$caricaFoto = “SI”;

if ($caricaFoto = “SI”)
{
// Elimino il file precedente prima di caricare il nuovo onde evitare doppioni (Es. caricata precedentemente .jpg e carico .png)…
foreach($allowedExtensions AS $extTmp)
{
$nomeJPGTmp = $pathImg.$id.”.”.$extTmp;
if (file_exists($nomeJPGTmp))
unlink($nomeJPGTmp);
}

$nomeFile = $id.”.”.$ext;
$uploadfile = $pathImg.$nomeFile;

if (move_uploaded_file($_FILES[$nomePostFoto]['tmp_name'],$uploadfile))
{
$size = getimagesize($uploadfile);
if ($size[0]>$wi)
{
// codice per il ridimensionamento
$he=$size[1]*($wi/$size[0]);
$image = imagecreatefromjpeg($uploadfile);
$thumb = imagecreatetruecolor($wi,$he);
imagecopyresampled($thumb,$image,0,0,0,0,$wi,$he,$size[0],$size[1]);
imagejpeg($thumb,$uploadfile, 80);

imagedestroy($image);
imagedestroy($thumb);
}
}
}
}
}
?>

Il codice si preoccupa di verificare che l’utente stia cercando di caricare un file altrimenti mostra a video un messaggio di alert, dopodiche’ verifica se l’estenzione del file che si sta caricando e’ tra quelle ammesse presenti nell’array $allowedExtensions. In caso positivo procede con l’eliminazione dell’immagine precedentemente caricata che potrebbe avere estensione diversa dall’immagine che si sta caricando, procedo con la generazione del path completo per il caricamento (cartella e nome file con estensione) e procede con il caricamento. Qualora il caricamento andasse a buon fine e l’immagine risultasse avere una larghezza maggiore rispetto a quanto definito dai parametri iniziali ($wi = 250) si procede con il resize dell’immagine basandoci su una semplice proporzione:
LarghezzaAttuale : AltezzaAttuale = LarghezzaImposta : altezzaSconosciuta

dove LarghezzaImposta e’ $wi. Dalla proporzione si evince che:
altezzaSconosciuta = AltezzaAttuale * LarghezzaImposta / LarghezzaAttuale

I parametri LarghezzaAttuale e AltezzaAttuale vengono restituiti nell’array generato dalla funzione getimagesize. Qualora avessimo la necessita’ di uno spazio con una massima Altezza e massima Larghezza ove posizionare l’immagine (Es.: 250 x 150 e’ l’ingombro massimo da utilizzare), onde evitare problemi con caricamenti di immagini con dimensioni che eccedono l’ingombro (Es.: 250 x 600) si puo’ agire in maniera dinamica sulla gestione della proporzione fissando l’altezza o la larghezza in base al rapporto dell’ingombro.
In pratica:
immaginiamo di avere un ingobro fissato dal nostro grafico di fiducia con la dimensione massima dell’immagine di 250 x 150

Cosa facciamo se un utente carica un’immagine di 250 x 600 ? Con l’attuale script caricheremo direttamente l’immagine scombinando il lavoro del grafico. Bisogna agire diversamente. Definiamo in testa allo script le due variabili dell’ingombro:
$wi = 250;
$he = 150;

La parte:
$he=$size[1]*($wi/$size[0]);

$image = imagecreatefromjpeg($uploadfile);
$thumb = imagecreatetruecolor($wi,$he);
imagecopyresampled($thumb,$image,0,0,0,0,$wi,$he,$size[0],$size[1]);
imagejpeg($thumb,$uploadfile, 80);

Diventera’:
if ( ($size[0] > $wi) OR ($size[1] > $he) )
{
$rapporto = $wi / $he;
$proporzione = $size[0] / $size[1];
if ($rapporto > $proporzione)
{
// Fisso la larghezza e ricalcolo l’altezza…
$he=$size[1]*($wi/$size[0]);
}
else
{
// Fisso l’altezza e ricalcolo la larghezza…
$wi=$size[0]*($he/$size[1]);
}

$image = imagecreatefromjpeg($uploadfile);
$thumb = imagecreatetruecolor($wi,$he);
imagecopyresampled($thumb,$image,0,0,0,0,$wi,$he,$size[0],$size[1]);
imagejpeg($thumb,$uploadfile, 80);

}

In questo modo rispetteremo il massimo ingombro. Alternativamente si puo’ agire via script in fase di visualizzazione delll’immagine fissando l’una o l’altra dimensioni in base alla stessa analisi.

Tornando al primo esempio, una volta trovata la nuova altezza si procede con la creazione di un contenitore della nostra nuova immagine (imagecreatetruecolor) ed il campionamento (imagecopyresampled) dell’immagine appena caricata all’interno del contenitore creato.
Nel nostro caso abbiamo indicato una qualita’ dell’immagine pari a 80 su una scala da 0 a 100 per diminuire il peso dell’immagine caricata.

A questo punto all’interno della cartella immagini avremo un’immagine che, al massimo, avra’ una larghezza di 250 pixel ed un’altezza opportunamente proporzionata.

Happy upload…

Others Script adv

Leave a Reply