Cum să creați dinamic miniaturi

În ecranul săptămânii din această săptămână, vă voi arăta cum să încărcați fișiere și apoi să creați dinamic PHP o miniatură. Fie că construiți un site de comerț electronic, fie doar o galerie simplă, aceste tehnici se vor dovedi absolut utile. Dacă sunteți pregătiți pentru emisiunea "spoonfed" a săptămânii, hai să mergem!

* Notă - Au existat câteva modificări minore ale codului după câteva gândiri suplimentare și câteva sugestii minunate. Nu vă faceți griji, foarte puțin sa schimbat. Doar niște curățenie. Puteți examina modificările de mai jos și / sau puteți descărca codul sursă.

Fișierul de configurare simplă

Primul pas este crearea unui simplu fișier de configurare în care să putem stoca câteva variabile. Prin plasarea acestora în propriul fișier, putem modifica cu ușurință codul nostru fără a fi nevoie să editați multe linii.

 $ final_width_of_image = 100; $ path_to_image_directory = 'imagini / fullsized /'; $ path_to_thumbs_directory = 'imagini / thumbs /';
  • $ final_width_of_image - Această variabilă va stoca lățimea miniaturii noastre.
  • $ path_to_image_directory - Aceasta stochează calea către dosarul nostru cu dimensiuni de dimensiune completă
  • $ path_to_thumbs_directory - Aceasta stochează calea către directorul nostru complet de miniaturi

Salvați acest fișier ca "config.php" și plasați-l în rădăcina folderului.

HTML-ul

Apoi, creați o pagină nouă numită "index.php" și lipiți următoarele.

       Dynamic Thumbnails   

Încarcă un fișier, omule!

Mai întâi, parcurgeți puțin până la eticheta corporală. Pentru a păstra lucrurile ca oase goale, am creat o formă extrem de simplă. Dar va face treaba bine.

 

Ori de câte ori lucrați cu tipul de intrare "file upload", trebuie să adăugați un atribut "enctype" la eticheta formularului.

 

În loc să publicăm o pagină diferită, vom scrie codul în documentul nostru principal. Pentru a face acest lucru, vom seta atributul de acțiune egal cu această pagină.

 action =“ 

Acum, derulați înapoi la codul PHP din partea de sus. Solicităm două fișiere. Primul este fișierul de configurare pe care tocmai l-am creat. Al doilea este "functions.php" - pe care o vom crea în scurt timp.

Apoi, verificăm dacă pagina a fost postată înapoi. Dacă este cazul, vom verifica dacă fișierul ales de utilizator a fost fie "jpg", "gif", fie "png". Putem face acest lucru prin verificarea numelui de fișier față de o expresie regulată.

 dacă preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['name'

Pentru a afla mai multe despre expresiile obișnuite, vizionați acest videoclip.

Ne mutăm, creăm câteva variabile.

  • $ filename - Stochează numele fișierului pe care utilizatorul a ales să îl încarce.
  • sursă $ - Când se face clic pe butonul de trimitere, fișierul va fi salvat într-un director temporar. Această variabilă va stoca acea cale.
  • țintă $ - Aceasta va stoca calea unde trebuie salvat imaginea încărcată.

Salvarea fișierului

Ultimul pas este să mutați fișierul din directorul temporar în folderul "images / fullsized". Putem face acest lucru prin apelarea move_uploaded_file () funcție. Vom trece în doi parametri. Primul trebuie să cunoască calea către dosarul temporar. Cel de-al doilea trebuie să știe unde să salveze fișierul. ($ source și $ target, respectiv)

 move_uploaded_file ($ sursă, $ țintă);

Crearea miniaturii

Mai degrabă decât să stocăm tot codul pe pagina index.php, să creăm o altă pagină numită "functions.php". Creați și deschideți acest fișier nou și scrieți o nouă funcție numită "createThumbnail ()".

 funcția createThumbnail ($ filename) necesită 'config.php'; dacă (preg_match ('/ [.] (jpg) $ /', $ nume fișier)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  altfel dacă (preg_match ('/ [.] (gif) $ /', $ nume fișier)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filename);  altfel dacă (preg_match ('/ [.] (png) $ /', $ nume fișier)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filename);  $ ox = imaginix ($ im); $ oy = imagini ($ im); $ nx = $ final_width_of_image; $ ny = etaj ($ oy * ($ final_width_of_image / $ ox)); $ nm = imaginecreatetruecolor ($ nx, $ ny); imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy); dacă ! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("A apărut o problemă, încercați din nou!");  imagejpeg ($ nm, $ cale_to_thumbs_directory. $ nume fișier); $ tn = 'imagine„; $ tn. = '
Felicitări. Fișierul dvs. a fost încărcat cu succes și a fost creată o miniatură. '; echo $ tn;

Vom începe prin a solicita încă o dată fișierul "config.php". Apoi, vom verifica dacă utilizatorul a selectat un "jpg", "gif" sau "png". Trebuie să facem acest lucru deoarece PHP necesită o funcție diferită în funcție de fișier: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".

După aceasta, trebuie să stocăm valorile de lățime și înălțime ale imaginii pe care utilizatorul a ales să le încarce. Putem face acest lucru prin a numi "imagesx", respectiv "picturesy", respectiv.

 $ ox = imaginix ($ im); $ oy = imagini ($ im);

Apoi, vom crea alte două variabile care vor stoca valorile de lățime și înălțime pentru miniatură care va fi în curând creată.

  • $ nx - este egală cu valoarea din fișierul nostru de configurare: 100
  • $ ny. Va trebui să executăm niște matematici simple pentru a găsi înălțimea proporțională de corecție.
 $ nx = $ final_width_of_image; $ ny = etaj ($ oy * ($ final_width_of_image / $ ox));

imagecreatetruecolor

În cazul nostru, trecem în variabilele "$ nx" și "$ ny" pe care tocmai le-am creat.

Copierea imaginii a fost redimensionată

 imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);

Salvarea miniaturii

Pașii finali necesită verificarea pentru a vedea dacă există un dosar "miniaturi". Dacă nu, o vom crea utilizând "mkdir". Apoi, vom scoate noua noastră imagine în dosarul miniaturi.

 dacă ! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("A apărut o problemă, încercați din nou!"); 

În cele din urmă, trebuie să reluăm miniatura pentru a arăta utilizatorului că imaginea sa a fost încărcată cu succes.

 $ tn = 'imagine„; $ tn. = '
Felicitări. Fișierul dvs. a fost încărcat cu succes și a fost creată o miniatură. '; echo $ tn;

Terminat

Foarte bine! Acest scenariu a fost oarecum făcut în mod grăbit - din cauza constrângerilor de timp. S-ar putea să doriți să curățați codul un pic și un pic mai mult de manipulare a erorilor.

Dacă doriți să luați mai multe lucruri, vedeți dacă vă puteți da seama și cum să cultivați imaginile! Ca întotdeauna, sunt mai mult decât deschis la rafinament și sugestii!

  • Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.