Dynamisch maken van miniaturen

In de screencast van deze week laat ik zien hoe je bestanden kunt uploaden en vervolgens PHP dynamisch een miniatuur kunt laten maken. Of u nu een e-commercesite bouwt of alleen een eenvoudige galerij, deze technieken zullen absoluut nuttig blijken te zijn. Als je klaar bent voor je "lepelgevoede" screencast van de week, laten we beginnen!

* Opmerking - Er zijn een paar kleine wijzigingen in de code aangebracht na wat extra denkwerk en enkele geweldige suggesties. Maak je geen zorgen, heel weinig is veranderd. Gewoon wat opruimen. U kunt de onderstaande wijzigingen bekijken en / of de broncode downloaden.

Het eenvoudige configuratiebestand

De eerste stap is om een eenvoudig configuratiebestand te maken waarin we een paar variabelen kunnen opslaan. Door deze in hun eigen bestand te plaatsen, kunnen we gemakkelijk onze code aanpassen zonder veel regels te hoeven bewerken.

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

$ final_width_of_image - Deze variabele slaat de breedte van onze thumbnail op.
$ path_to_image_directory - Hiermee slaat u het pad op naar onze map met de volledige grootte van afbeeldingen
$ path_to_thumbs_directory - Dit slaat het pad op naar onze volledige map met miniaturen

Sla dit bestand op als 'config.php' en plaats het in de hoofdmap van uw map.

De HTML

Maak vervolgens een nieuwe pagina met de naam "index.php" en plak het volgende.

       Dynamische miniaturen   Upload een bestand, man!

Blader eerst een beetje naar de body-tag. Om dingen zo kaal mogelijk te houden, heb ik een uiterst eenvoudige vorm gemaakt. Maar het zal de klus wel goed gedaan krijgen.

Elke keer dat u gaat werken met het invoertype "bestandsupload", moet u een kenmerk "enctype" toevoegen aan de formuliertag.

   In plaats van op een andere pagina te plaatsen, schrijven we de code gewoon in ons hoofddocument. Om dat te doen, zullen we het actiekenmerk gelijk aan deze pagina instellen.
  action =" Blader nu terug naar de PHP-code bovenaan. We hebben twee bestanden nodig. De eerste is het configuratiebestand dat we zojuist hebben gemaakt. De tweede is "functions.php" - die we binnenkort zullen maken.
  Vervolgens controleren we of de pagina is teruggeplaatst. Als dit het geval is, controleren we of het bestand dat de gebruiker heeft gekozen een 'jpg', 'gif' of 'png' is. We kunnen dit doen door de bestandsnaam te vergelijken met een reguliere expressie.
  if (preg_match ('/ [.] (jpg) | (gif) | (png) $ /', $ _FILES ['fupload'] ['name']))
  Raadpleeg deze screencast voor meer informatie over reguliere expressies.
  Als we verder gaan, maken we een paar variabelen.
   $ filename - Slaat de naam op van het bestand dat de gebruiker heeft gekozen om te uploaden.
  $ source - Wanneer op de knop Verzenden wordt geklikt, wordt het bestand opgeslagen in een tijdelijke map. Deze variabele slaat dat pad op.
  $ doelwit - Hiermee wordt het pad opgeslagen waar de geüploade afbeelding moet worden opgeslagen.
 
 Het bestand opslaan
  De laatste stap is om het bestand uit de tijdelijke map naar onze map "images / fullsized" te verplaatsen. We kunnen dit doen door de move_uploaded_file () functie. We zullen twee parameters doorgeven. De eerste moet het pad naar de tijdelijke map kennen. De tweede moet weten waar het bestand moet worden opgeslagen. ($ bron en $ doel, respectievelijk)
  move_uploaded_file ($ source, $ target);
 De miniatuur maken
  In plaats van alle code op onze index.php-pagina op te slaan, maken we een nieuwe pagina met de naam "functions.php". Maak en open dit nieuwe bestand en schrijf een nieuwe functie genaamd "createThumbnail ()".
  functie createThumbnail ($ filename) vereist 'config.php'; if (preg_match ('/ [.] (jpg) $ /', $ filename)) $ im = imagecreatefromjpeg ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (gif) $ /', $ filename)) $ im = imagecreatefromgif ($ path_to_image_directory. $ filename);  else if (preg_match ('/ [.] (png) $ /', $ filename)) $ im = imagecreatefrompng ($ path_to_image_directory. $ filename);  $ 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 ("Er was een probleem. Probeer het opnieuw!");  imagejpeg ($ nm, $ path_to_thumbs_directory. $ filename); $ tn = ''; $ tn. = '
Gefeliciteerd. Uw bestand is succesvol geüpload en er is een miniatuur gemaakt. '; echo $ tn; 
  We zullen beginnen met opnieuw het bestand "config.php" te vereisen. Vervolgens gaan we na of de gebruiker een "jpg", "gif" of "png" heeft geselecteerd. We moeten dit doen omdat PHP afhankelijk van het bestand een andere functie vereist: "imagecreatefromjpeg", "imagecreatefromgif", "imagecreatefrompng".
     Daarna moeten we de waarden voor breedte en hoogte opslaan van de afbeelding die de gebruiker heeft gekozen om te uploaden. We kunnen dit doen door respectievelijk "imagesx" en "picturey" te bellen.
  $ ox = imagesx ($ im); $ oy = imagesy ($ im);
  Vervolgens maken we nog twee variabelen die de waarden voor de breedte en hoogte opslaan voor de miniatuur die binnenkort wordt gemaakt.
   $ nx - is gelijk aan de waarde van ons configuratiebestand: 100
  $ ny. We zullen wat eenvoudige wiskunde moeten uitvoeren om de correctie-proportionele hoogte te vinden.
 
  $ nx = $ final_width_of_image; $ ny = floor ($ oy * ($ final_width_of_image / $ ox));
 imagecreatetruecolor
     In ons geval geven we de variabelen '$ nx' en '$ ny' door die we zojuist hebben gemaakt.
 Verkleinde afbeelding kopie
     imagecopyresized ($ nm, $ im, 0,0,0,0, $ nx, $ ny, $ ox, $ oy);
 De miniatuur opslaan
  De laatste stappen vereisen dat we controleren of er een map met "miniaturen" bestaat. Als dat niet het geval is, maken we het met behulp van "mkdir". Vervolgens voeren we onze nieuwe afbeelding uit naar de map met miniaturen.
  if (! file_exists ($ path_to_thumbs_directory)) if (! mkdir ($ path_to_thumbs_directory)) die ("Er was een probleem. Probeer het opnieuw!"); 
     Ten slotte moeten we de miniatuur weergeven om de gebruiker te laten zien dat zijn afbeelding met succes is geüpload.
  $ tn = ''; $ tn. = '
Gefeliciteerd. Uw bestand is succesvol geüpload en er is een miniatuur gemaakt. '; echo $ tn;
 Afgewerkt
  Goed gedaan! Deze screencast was enigszins haastig gedaan - vanwege tijdgebrek. Misschien wilt u de code een beetje opruimen en een beetje meer foutafhandeling.
  Als je verder wilt gaan, kijk dan eens of je de afbeeldingen kunt bijsnijden! Zoals altijd ben ik meer dan open voor verfijning en suggesties!
  Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.
 
  
 



		
			
	   
	




Code