[TUT][PHP] GTAvatars

[David22]

Tutorial

GTAvatars -- de achtergrondcode!

Inleiding

Gisteren heeft Joriz de GTAvatars geïntroduceerd op het forum, een service welke een willekeurige voorgrond en achtergrond samenvoegt tot een leuke avatar. Dat kunnen wij ook!

Wat gaan we doen?

In deze tutorial zal ik laten zien hoe je een willekeurige afbeelding inlaadt en hier een willekeurige voorgrond overheen plakt. Niveau is redelijk laag, in principe zou iedereen met basiskennis van PHP deze tutorial moeten kunnen volgen.

Waarschuwing: In deze tutorial gebruik ik de functie read_dir. Hier hoort geen underscore tussen! Het forum laat mij echter read_dir niet aan elkaar plaatsen, waardoor ik gedwongen wordt hier van gebruik te maken!

De bestanden

Voor deze tutorial heb ik de volgende bestanden beschikbaar:

• [MAP] front
  
  • niko.png
    
  • sa-girl.png
    
  • yusuf.png
    

  [*][MAP] back

  • img1.png
    
  • img2.png
    
  • img3.png
    

  [*]index.php

Zoals je al kan raden, plaats in in de mappen 'front' en 'back' respectievelijk de voor- en achtergronden. Ik heb er voor gekozen om alle afbeeldingen in .png op de slaan, om de consistentie te bewaren (de voorgronden moeten namelijk transparantie ondersteunen -- iets wat .jpg niet kan!). De complete mapstructuur is onderaan deze tutorial te downloaden. Alle afbeeldingen zijn van het formaat 512 x 512.

De code

Tijd voor het echte werk! Voordat ik begin met code te plaatsen, zal ik eerst een stappenplan maken:

1. Lees de beide directories uit, sla de afbeeldingen op in een array
   
2. Kies een willekeurige voor- en achtergrond
   
3. Maak de afbeelding
   
4. Geef de afbeelding aan de browser
   
5. Leeg de buffer
   

Uitlezen van de directories

Om de directory uit te lezen, moeten we deze eerst openen:

$dir = opendir("./front");

Vervolgens maken we een lege array aan om de gevonden bestanden in op te slaan:

$fronts = array();

Hierna gaan we alle items uit de geopende map doorlopen, en slaan we de naam van het bestand wat we nu bekijken op in $filename.

while($filename = read_dir($dir)) {

De bovenstaande code zegt eigenlijk "als er nog een 'ongelezen' bestand in de map staat, sla de naam hiervan dan op in $filename en voer de volgende code uit:"

We zijn alleen geinteresseerd in de .png bestanden, dus halen we de extensie op met de functie pathinfo(). We gebruiken de parameter PATHINFO_EXTENSION omdat we alleen de extentie willen zien. Vervolgens kijken we of deze gelijk is aan png:

if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {

Als dit het geval is, voegen we de filename toe aan onze array:

$fronts[] = $filename;

Uiteraard moeten we de geopende blokken codes ook afsluiten, en we verbreken ook de verbinding naar de map:

}
}
closedir($dir);

Dit moeten we ook doen voor de achtergronden, vervang daarvoor ./front in ./back en $fronts in $backs. Dit geeft ons tot nu toe de volgende code:

$dir = opendir("./front");
$fronts = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $fronts[] = $filename;
   }
}
closedir($dir);

$dir = opendir("./back");
$backs = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $backs[] = $filename;
   }
}
closedir($dir);

Kies een willekeurige voor- en achtergrond

PHP heeft een prachtige functie voor het kiezen van een random waarde uit een array: array_rand(). Deze geeft de index terug in een array, we moeten dan dus alleen nog even de waarde horende bij die index op te vragen om heel makkelijk aan een willekeurige voor- en achtergrond te komen:

$front =  $fronts[array_rand($fronts)];
$back = $backs[array_rand($backs)];

Dit geeft ons tot nu toe de volgende code:

$dir = opendir("./front");
$fronts = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $fronts[] = $filename;
   }
}
closedir($dir);

$dir = opendir("./back");
$backs = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $backs[] = $filename;
   }
}
closedir($dir);

$front =  $fronts[array_rand($fronts)];
$back = $backs[array_rand($backs)];

Maak de afbeelding

Ah, the place where the magic happens. We beginnen eerst met de browser vertellen dat we een png-afbeelding zullen geven:

header('content-type: image/png');

Vervolgens openen we de zojuist gekozen voor- en achtergrond:

$image = imagecreatefrompng("back/" . $back);
$overlay = imagecreatefrompng("front/" . $front);

Let op: de mappen moeten er nog voor, want die zitten niet inbegrepen in de hiervoor gegenereerde bestandsnaam!

Hierna gaan we de twee afbeeldingen over elkaar plaatsen. Dit doen we met de functie imagecopy(). Deze heeft de volgende syntax:

bool imagecopy ( resource $dst_im , resource $src_im , int $dst_x , int $dst_y , int $src_x , int $src_y , int $src_w , int $src_h )

Dit betekend het volgende (de beschrijving is afkomstig van de PHP manual, dus Engels):

dst_im

Destination image link resource. -- In ons geval de achtergrond, dus $image

src_im

Source image link resource. -- In ons geval de voorgrond, dus $overlay

dst_x

x-coordinate of destination point.

dst_y

y-coordinate of destination point.

src_x

x-coordinate of source point.

src_y

y-coordinate of source point. -- We plaatsen de afbeeldingen helemaal over elkaar heen, en de hebben dezelfde afmetingen. Al deze waarden zijn dus 0.

src_w

Source width.

src_h

Source height. -- Beide 512, we werken per slot van rekening met alleen maar 512x512 afbeeldingen!

Onze functie ziet er dan dus als volgt uit:

imagecopy($image, $overlay, 0, 0, 0, 0, 512, 512);

Nu staat in $image onze overlay bijgeschreven; we hebben het resultaat dus al! We moeten nu alleen nog even het resultaat laten zien...

Geef de afbeelding aan de browser en leeg de buffer

Om af te sluiten, geven we de afbeelding nog even aan de browser en legen we de buffer.

imagepng($image);
imagedestroy($image);

Dit geeft ons de uiteindelijke code (voorzien van commentaar -- yay!):

<?php
/**
*   Random Avatar Generator
*   Based on GTAvatars by GTAGames.nl
*   Script by David22 for GTAGames.nl
*/

// Open the front directory en create an array with all png images in there
$dir = opendir("./front");
$fronts = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $fronts[] = $filename;
   }
}
closedir($dir);

// Perform the same action for the back directory
$dir = opendir("./back");
$backs = array();
while($filename = read_dir($dir)) {
   if(pathinfo($filename, PATHINFO_EXTENSION) == "png") {
       $backs[] = $filename;
   }
}
closedir($dir);

// Choose a random index from the generated arrays
$front =  $fronts[array_rand($fronts)];
$back = $backs[array_rand($backs)];

// Tell the browser we're providing an image
header('content-type: image/png');

// The base will be the background
$image = imagecreatefrompng("back/" . $back);

// Open the foreground
$overlay = imagecreatefrompng("front/" . $front);

// Paste the foreground over the background
imagecopy($image, $overlay, 0, 0, 0, 0, 512, 512);

// Output the image
imagepng($image);

// Clear the buffer
imagedestroy($image);
?>

Afsluiting

En dat was 'm al. Het script is totaal niet moeilijk, PHP bevat vele functies om tot een soortgelijk resultaat te komen. Mocht je nog vragen of opmerkingen hebben, post gerust.

Alle bestanden gebruikt in deze tutorial kan je op http://www.solidfiles.com/d/407e8da1ad/ downloaden. De uiteindelijke code staat ook op http://pastebin.com/mb7Hp0kd

[Die Hard]

Ik heb hier totaal geen verstand van, maar dit ziet er toch wel heel strak en netjes uit. Mijn complimenten Davido.

[SpacyColours]

Awesome, thank thee!

[Sublime]

Ik heb het in kladblok staan maar er gebeurt niets!?!

[David22]

Ik heb het in kladblok staan maar er gebeurt niets!?!

Heb je enig idee hoe PHP werkt?

[Kai-ShockWave]

Nice, misschien kan ik dit ook gebruiken voor LibertyKillerZ. Thnx! ^^

[Megadreams]

Mooie tutorial! Hij is toegevoegd aan de Master Tutorial List.

[David22]

Nice, misschien kan ik dit ook gebruiken voor LibertyKillerZ. Thnx! ^^

Zou nice zijn! Laat je 't weten als je 't ooit nog eens gebruikt?

Mooie tutorial! Hij is toegevoegd aan de Master Tutorial List.

Thanks!

Awesome, thank thee!

Graag gedaan