Slik lager du miniatyrbilder dynamisk

I denne ukes skjermbildet viser jeg deg hvordan du laster opp filer og da har PHP dynamisk opprettet et miniatyrbilde. Enten du bygger et e-handelsnettsted, eller bare et enkelt galleri, vil disse teknikkene absolutt vise seg å være nyttige. Hvis du er klar for din "spoonfed" screencast i uken, la oss gå!

* Merk - Det har vært noen få små endringer i koden etter litt ekstra tenkning og noen gode forslag. Ikke bekymre deg, veldig lite har endret seg. Bare litt opprydding. Du kan se gjennom endringene nedenfor, og / eller last ned kildekoden.

Den enkle konfig filen

Det første trinnet er å lage en enkel config-fil der vi kan lagre noen få variabler. Ved å plassere disse i sin egen fil, kan vi enkelt gjøre endringer i koden vår uten å måtte redigere mange linjer.

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

$ final_width_of_image - Denne variabelen lagrer bredden på miniatyrbildet.
$ path_to_image_directory - Dette lagrer banen til vår fullstendige bildemappe
$ path_to_thumbs_directory - Dette lagrer banen til vår fulle miniatyrer katalog

Lagre denne filen som 'config.php' og legg den i roten til mappen din.

HTML-koden

Deretter oppretter du en ny side som heter "index.php" og limer inn følgende.

       Dynamiske miniatyrbilder   Last opp en fil, mann!

Først, rull ned litt til kroppsmerket. For å holde ting som bare-bein som mulig, har jeg skapt en ekstremt enkel form. Men det vil få jobben helt greit.

Når du skal jobbe med inntastingstypen "filopplasting", må du legge til et "enctype" attributt til skjemaetiketten.

   I stedet for å legge ut på en annen side, skriver vi bare koden i hoveddokumentet. For å gjøre det, setter vi handlingsattributtet lik denne siden.
  action =" Nå, bla tilbake til PHP-koden øverst. Vi krever to filer. Den første er konfigurasjonsfilen som vi nettopp har opprettet. Den andre er "functions.php" - som vi lager snart.
  Deretter sjekker vi for å se om siden har postet tilbake. Hvis den har, vil vi deretter sjekke om filen som brukeren valgte, var enten "jpg", "gif" eller "png". Vi kan gjøre dette ved å sjekke filnavnet mot et vanlig uttrykk.
  hvis (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['navn']))
  For å lære mer om vanlige uttrykk, se denne skjermbildet.
  Flytter sammen, vi lager noen variabler.
   $ filnavn - Lagrer navnet på filen som brukeren har valgt å laste opp.
  $ kilde - Når send-knappen klikkes, lagres filen i en midlertidig katalog. Denne variabelen lagrer den banen.
  $ target - Dette lagrer banen der det opplastede bildet skal lagres.
 
 Lagre filen
  Det siste trinnet er å flytte filen fra den midlertidige katalogen til vår "bilder / fullsized" -mappe. Vi kan gjøre dette ved å ringe move_uploaded_file () -funksjonen. Vi passerer i to parametere. Den første må kjenne banen til den midlertidige mappen. Den andre trenger å vite hvor du skal lagre filen. (henholdsvis $ kilde og $ mål)
  move_uploaded_file ($ source, $ target);
 Opprette miniatyrbildet
  I stedet for å lagre all koden på vår index.php-side, la oss lage en annen side kalt "functions.php". Opprett og åpne denne nye filen og skriv en ny funksjon kalt "createThumbnail ()".
  funksjon createThumbnail ($ filnavn) krever 'config.php'; hvis (preg_match ('/ [.] (jpg) $ /', $ filnavn)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filnavn);  annet hvis (preg_match ('/ [.] (gif) $ /', $ filnavn)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filnavn);  annet hvis (preg_match ('/ [.] (png) $ /', $ filnavn)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filnavn);  $ ox = imagesx ($ im); $ oy = imagesy ($ im); $ nx = $ final_width_of_image; $ ny = gulv ($ oy * ($ final_width_of_image / $ ox)); $ nm = imagecreatetruecolor ($ nx, $ ny); imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ okse, $ oy); hvis (! file_exists ($ path_to_thumbs_directory)) hvis (! mkdir ($ path_to_thumbs_directory)) die ("Det oppstod et problem. Vennligst prøv igjen!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ filnavn); $ tn = ''; $ tn. = '
Gratulerer. Filen din er lastet opp, og et miniatyrbilde er opprettet. '; ekko $ tn; 
  Vi starter med å kreve filen "config.php" igjen. Deretter kontrollerer vi om brukeren valgte "jpg", "gif" eller "png". Vi må gjøre dette fordi PHP krever en annen funksjon avhengig av filen: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Deretter må vi lagre bredden og høydeverdiene til bildet som brukeren valgte å laste opp. Vi kan gjøre dette ved å ringe henholdsvis "imagesx" og "imagesy".
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  Deretter oppretter vi to variabler som lagrer bredde- og høydeverdiene for miniatyrbildet som snart skal opprettes.
   $ nx - er lik verdien fra vår config-fil: 100
  $ ny. Vi må løpe litt enkel matte for å finne korrigeringsforholdshøyde høyde.
 
  $ nx = $ final_width_of_image; $ ny = gulv ($ oy * ($ final_width_of_image / $ ox));
 Image
     I vårt tilfelle passerer vi i variablene "$ nx" og "$ ny" som vi nettopp har opprettet.
 Bildekopiering endret
     imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ okse, $ oy);
 Lagre miniatyrbildet
  De endelige trinnene krever at vi kontrollerer for å se om det finnes en "miniatyrer" -mappe. Hvis det ikke gjør det, lager vi det ved å bruke "mkdir". Deretter sender vi vårt nye bilde til miniatyrbildemappen.
  hvis (! file_exists ($ path_to_thumbs_directory)) hvis (! mkdir ($ path_to_thumbs_directory)) die ("Det oppstod et problem. Vennligst prøv igjen!"); 
     Til slutt må vi ekko ut miniatyrbildet for å vise brukeren at bildet hans ble lastet opp.
  $ tn = ''; $ tn. = '
Gratulerer. Filen din er lastet opp, og et miniatyrbilde er opprettet. '; ekko $ tn;
 ferdig
  Bra gjort! Denne skjermbildet ble noe skyndsomt gjort - på grunn av tidsbegrensninger. Du vil kanskje rydde opp koden litt og litt mer feilbehandling.
  Hvis du ønsker å ta ting videre, kan du se om du kan finne ut hvordan du kan beskjære bildene også! Som alltid er jeg mer enn åpen for raffinement og forslag!
  Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.
 
  
 



		
			
	   
	




Kode