Come creare dinamicamente le miniature

Nello screencast di questa settimana, ti mostrerò come caricare i file e poi fare in modo che PHP crei dinamicamente una miniatura. Se stai costruendo un sito di e-commerce, o semplicemente una semplice galleria, queste tecniche si dimostreranno assolutamente utili. Se sei pronto per il tuo screencast "sfacciato" della settimana, andiamo avanti!

* Nota - Ci sono state alcune lievi modifiche al codice dopo alcune riflessioni aggiuntive e alcuni ottimi suggerimenti. Non ti preoccupare, molto poco è cambiato. Solo un po 'di pulizia. È possibile rivedere le modifiche di seguito e / o scaricare il codice sorgente.

Il file di configurazione semplice

Il primo passo è creare un semplice file di configurazione in cui possiamo memorizzare alcune variabili. Inserendo questi nel proprio file, possiamo facilmente apportare modifiche al nostro codice senza dover modificare molte righe.

 $ final_width_of_image = 100; $ path_to_image_directory = 'images / fullsized /'; $ path_to_thumbs_directory = 'images / thumbs /';

$ final_width_of_image - Questa variabile memorizzerà la larghezza della nostra miniatura.
$ path_to_image_directory - Questo memorizza il percorso della nostra cartella di immagini di dimensioni complete
$ path_to_thumbs_directory - Questo memorizza il percorso alla nostra directory completa di miniature

Salva questo file come "config.php" e posizionalo nella radice della tua cartella.

L'HTML

Quindi, crea una nuova pagina chiamata "index.php" e incolla quanto segue.

       Miniature dinamiche   Carica un file, Man!

Per prima cosa scorri un po 'verso il tag del corpo. Per mantenere le cose il più semplici possibile, ho creato una forma estremamente semplice. Ma farà il lavoro benissimo.

Ogni volta che lavorerai con il tipo di input "caricamento file", devi aggiungere un attributo "enctype" al tag form.

   Piuttosto che postare su una pagina diversa, scriveremo il codice nel nostro documento principale. Per fare ciò, imposteremo l'attributo action uguale a questa pagina.
  action =" Ora, torna al codice PHP in alto. Abbiamo bisogno di due file. Il primo è il file di configurazione che abbiamo appena creato. Il secondo è "functions.php" - che creeremo a breve.
  Successivamente, stiamo verificando se la pagina è stata postata. In caso affermativo, controlleremo se il file scelto dall'utente è "jpg", "gif" o "png". Possiamo farlo controllando il nome del file con un'espressione regolare.
  if (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['name'])))
  Per saperne di più sulle espressioni regolari, guarda questo screencast.
  Andando avanti, stiamo creando alcune variabili.
   $ filename - Memorizza il nome del file che l'utente ha scelto di caricare.
  $ fonte - Quando si fa clic sul pulsante di invio, il file verrà salvato in una directory temporanea. Questa variabile memorizzerà quel percorso.
  $ bersaglio - Questo memorizzerà il percorso di dove l'immagine caricata dovrebbe essere salvata.
 
 Salvataggio del file
  Il passaggio finale è spostare il file dalla directory temporanea nella nostra cartella "images / fullsized". Possiamo farlo chiamando il funzione move_uploaded_file (). Passeremo in due parametri. Il primo deve conoscere il percorso della cartella temporanea. Il secondo ha bisogno di sapere dove salvare il file. ($ fonte e $ target, rispettivamente)
  move_uploaded_file ($ source, $ target);
 Creazione dell'anteprima
  Invece di memorizzare tutto il codice nella nostra pagina index.php, creiamo un'altra pagina chiamata "functions.php". Crea e apri questo nuovo file e scrivi una nuova funzione chiamata "createThumbnail ()".
  function createThumbnail ($ filename) require 'config.php'; if (preg_match ('/ [.] (jpg) $ /', $ nomefile)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (gif) $ /', $ nomefile)) $ im = imagecreatefromgif ($ path_to_image_directory. $ nomefile);  else if (preg_match ('/ [.] (png) $ /', $ nomefile)) $ im = imagecreatefrompng ($ path_to_image_directory. $ nomefile);  $ ox = imagesx ($ im); $ oy = imagesy ($ im); $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox)); $ nm = imagecreatetruecolor ($ nx, $ ny); imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy); if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("C'è stato un problema, per favore riprova!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ nomefile); $ tn = ''; $ tn. = '
Congratulazioni. Il tuo file è stato caricato correttamente e una miniatura è stata creata. '; echo $ tn; 
  Inizieremo richiedendo nuovamente il file "config.php". Successivamente, controlleremo se l'utente ha selezionato "jpg", "gif" o "png". Dobbiamo farlo perché PHP richiede una funzione diversa a seconda del file: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Dopodiché, dobbiamo memorizzare i valori di larghezza e altezza dell'immagine che l'utente ha scelto di caricare. Possiamo farlo chiamando rispettivamente "imagesx" e "imagesy".
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  Successivamente, creeremo altre due variabili che memorizzeranno i valori di larghezza e altezza per la miniatura che verrà presto creata.
   $ nx - è uguale al valore del nostro file di configurazione: 100
  $ NY. Avremo bisogno di eseguire dei semplici calcoli matematici per trovare la correzione dell'altezza proporzionata.
 
  $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox));
 ImageCreateTrueColor
     Nel nostro caso, stiamo passando le variabili "$ nx" e "$ ny" che abbiamo appena creato.
 Ridimensionamento della copia dell'immagine
     imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);
 Salvataggio della miniatura
  I passaggi finali richiedono che controlliamo per vedere se esiste una cartella "miniature". In caso contrario, lo creeremo usando "mkdir". Quindi, pubblicheremo la nostra nuova immagine nella cartella delle anteprime.
  if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("C'è stato un problema, per favore riprova!"); 
     Infine, abbiamo bisogno di echeggiare la miniatura per mostrare all'utente che la sua immagine è stata caricata con successo.
  $ tn = ''; $ tn. = '
Congratulazioni. Il tuo file è stato caricato correttamente e una miniatura è stata creata. '; echo $ tn;
 Finito
  Molto bene! Questo screencast è stato un po 'frettoloso - a causa di vincoli temporali. Potresti voler pulire un po 'il codice e gestire un po' di più.
  Se desideri fare qualcosa di più, vedi se riesci a capire come ritagliare le immagini! Come sempre, sono più che aperto alla raffinatezza e ai suggerimenti!
  Iscriviti al feed RSS di NETTUTS per ulteriori tuts e articoli di sviluppo web giornalieri.
 
  
 



		
			
	   
	




Codice