Så här skapar du miniatyrbilder dynamiskt

I den här veckans skärmdump kommer jag visa dig hur du laddar upp filer och då har PHP dynamiskt skapat en miniatyrbild. Oavsett om du bygger en e-handelsplats, eller bara ett enkelt galleri, kommer dessa tekniker att vara användbara. Om du är redo för din "spoonfed" skärmdump i veckan, låt oss gå igång!

* Obs! Det har varit några små förändringar i koden efter lite ytterligare tänkande och några bra förslag. Oroa dig inte, mycket lite har förändrats. Bara lite rengöring. Du kan granska ändringarna nedan och / eller ladda ner källkoden.

Den enkla konfigurationsfilen

Det första steget är att skapa en enkel config-fil där vi kan lagra några variabler. Genom att placera dessa i sin egen fil kan vi enkelt göra ändringar i vår kod utan att behöva redigera många rader.

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

$ final_width_of_image - Denna variabel lagrar bredden på vår miniatyrbild.
$ path_to_image_directory - Detta lagrar sökvägen till vår mapp med full storlek
$ path_to_thumbs_directory - Detta lagrar sökvägen till vår fullständiga miniatyrer katalog

Spara den här filen som "config.php" och placera den i rutan till din mapp.

HTML

Skapa sedan en ny sida som heter "index.php" och klistra in följande.

       Dynamiska miniatyrbilder   Ladda upp en fil, man!

Först, rulla ner lite till kropps taggen. För att hålla saker som nakna ben som möjligt har jag skapat en extremt enkel form. Men det kommer att få jobbet helt bra.

Varje gång du kommer att arbeta med inmatningstypen "filuppladdning" måste du lägga till en "enctype" -attribut i formtaggen.

   I stället för att skicka till en annan sida skriver vi bara koden i vårt huvuddokument. För att göra så ställer vi åtgärdsattributet lika med den här sidan.
  action =" Nu bläddra tillbaka till PHP-koden längst upp. Vi kräver två filer. Den första är den konfigurationsfil som vi just skapat. Den andra är "functions.php" - som vi skapar inom kort.
  Därefter checkar vi för att se om sidan har skrivit tillbaka. Om den har, kontrollerar vi sedan om filen som användaren valde var antingen "jpg", "gif" eller "png". Det kan vi göra genom att kontrollera filnamnet mot ett vanligt uttryck.
  om (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['namn']))
  För att få veta mer om vanliga uttryck, kolla in den här skärmbilden.
  När vi flyttar, skapar vi några variabler.
   $ filnamn - Lagrar namnet på filen som användaren har valt att ladda upp.
  $ källa - När inmatningsknappen klickas sparas filen i en tillfällig katalog. Denna variabel lagrar den sökvägen.
  $ mål - Detta lagrar sökvägen för var den uppladdade bilden ska sparas.
 
 Spara filen
  Det sista steget är att flytta filen från den tillfälliga katalogen till mappen "images / fullsized". Vi kan göra det genom att ringa move_uploaded_file () funktionen. Vi passerar i två parametrar. Den första måste känna till vägen till den tillfälliga mappen. Den andra behöver veta var filen ska sparas. ($ källa respektive $ mål)
  move_uploaded_file ($ source, $ target);
 Skapa miniatyrbilden
  Snarare än att lagra hela koden på vår index.php-sida, låt oss skapa en annan sida som heter "functions.php". Skapa och öppna den här nya filen och skriv en ny funktion som heter "createThumbnail ()".
  funktion createThumbnail ($ filnamn) kräver 'config.php'; om (preg_match ('/ [.] (jpg) $ /', $ filnamn)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filnamn);  annars om (preg_match ('/ [.] (gif) $ /', $ filnamn)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filnamn);  annars om (preg_match ('/ [.] (png) $ /', $ filnamn)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filnamn);  $ ox = imagesx ($ im); $ oy = imagesy ($ im); $ nx = $ final_width_of_image; $ ny = golv ($ oy * ($ final_width_of_image / $ ox)); $ nm = imagecreatetruecolor ($ nx, $ ny); imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy); om ! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) dö ("Det uppstod ett problem. Vänligen försök igen!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ filnamn); $ tn = ''; $ tn. = '
Grattis. Din fil har laddats upp och en miniatyrbild har skapats. '; echo $ tn; 
  Vi börjar med att kräva filen "config.php" igen. Därefter kontrollerar vi om användaren valt "jpg", "gif" eller "png". Vi måste göra detta eftersom PHP kräver en annan funktion beroende på filen: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Därefter måste vi lagra bredden och höjdvärdena för den bild som användaren valde att ladda upp. Vi kan göra detta genom att kalla "imagesx" respektive "imagesy".
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  Därefter skapar vi ytterligare två variabler som lagrar bredd- och höjdvärdena för miniatyrbilden som snart ska skapas.
   $ nx - är lika med värdet från vår config-fil: 100
  $ ny. Vi måste springa lite enkel matte för att hitta korrigeringsproportionell höjd.
 
  $ nx = $ final_width_of_image; $ ny = golv ($ oy * ($ final_width_of_image / $ ox));
 ImageCreateTrueColor
     I vårt fall passerar vi i variablerna "$ nx" och "$ ny" som vi just skapat.
 Bildkopiering ändrats
     imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);
 Spara miniatyrbilden
  De sista stegen kräver att vi kontrollerar om det finns en "miniatyr" -mapp. Om det inte gör det kommer vi att skapa det genom att använda "mkdir". Sedan ska vi mata ut vår nya bild till miniatyrbilder-mappen.
  om ! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) dö ("Det uppstod ett problem. Vänligen försök igen!"); 
     Slutligen måste vi echo miniatyren för att visa användaren att hans bild har laddats upp.
  $ tn = ''; $ tn. = '
Grattis. Din fil har laddats upp och en miniatyrbild har skapats. '; echo $ tn;
 Färdiga
  Bra gjort! Den här skärmbilden gjordes ganska snabbt - på grund av tidsbegränsningar. Du kanske vill rensa upp koden lite och lite mer felhantering.
  Om du vill ta saker längre, se om du kan räkna ut hur man beskärar bilderna också! Som alltid är jag mer än öppen för förfining och förslag!
  Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.
 
  
 



		
			
	   
	




Koda