Tutorials
De GD bibliotheek: afbeeldingen creëren
De basis van de technieken van de GD bibliotheek.
Pagina 1
Installeren en het assenstelsel
De GD bibliotheek is een extensie. Zorg dat hij geïnstalleerd is. Stuur een e-mail aan degene die jouw server beheert. Of installeer hem zelf.
Download van php.net het zip-bestand dat overeenkomt met jouw geïnstalleerde php versie. Pak het uit. Zoek in de map ext het bestand php_gd2.dll en kopieer het naar een map waar je hem terug vind. Die map moet wel een map zijn in de map waar je php hebt geïnstalleerd.
Dat was het nog niet allemaal. PHP weet nog niets. Op naar php.ini in de map WINDOWS op je harde schijf. Open het bestand en zoek het stuk waar alle extensies worden geladen. Haal voor de regel met de GD extensie de puntkomma (;) weg en start je server opnieuw.
Je hebt de GD bibliotheek geïnstalleerd. Gefeliciteerd :c)
De GD bibliotheek van PHP is gebaseerd op assenstelsels. Omgekeerde assenstelsels. Het enige deel wat je gebruikt, is deel IV. Het enige verschil is dat de getallen positief zijn.
Het assenstelsel is een begrip in de wiskunde. Je hebt dus enig inzicht nodig.
Pagina 2
Een lege afbeelding
Een afbeelding maken, doe je met de expressie imagecreate of imagecreatetruecolor. De laatste geeft een beter beeld. True color, juiste kleur.
resource imagecreatetruecolor ( int x_size, int y_size )
resource imagecreate ( int x_size, int y_size )
De syntax is (zoals je ziet) precies hetzelfde.
Ik maak er een variabele van, omdat je bij (bijna) iedere expressie de resource image moet opgeven. Vergelijk het maar met fopen :c)
resource imagecreatetruecolor ( int x_size, int y_size )
resource imagecreate ( int x_size, int y_size )
De syntax is (zoals je ziet) precies hetzelfde.
<?php
$afbeelding = imagecreatetruecolor(80, 15);
?>
Ik maak er een variabele van, omdat je bij (bijna) iedere expressie de resource image moet opgeven. Vergelijk het maar met fopen :c)
Pagina 3
Afbeeldingen weergeven
Kies van te voren in welk formaat je de afbeelding wilt hebben. In PHP heb je daarvoor een ruime keuze. Gif, jpeg, png en bmp.
Ikzelf ga voor png. PNG is kleiner dan jpeg, beter dan gif en kan hetzelfde.. Waarom niet?
Als het goed is heb je voor een formaat gekozen. Dan ga je eerst een header verzenden:
Als je een ander bestandsformaat heb gekozen, zet je in plaats van gif, gewoonweg het betreffende bestandsformaat neer.
Om de afbeelding te weergeven gebruik je de expressie imagegif voor gif-afbeeldingen. Bij een ander bestandsformaat vervang je gif voor dat bestandsformaat.
Met de expressie imagedestroy maak ik het geheugen van de computer vrij, omdat de afbeelding daarin geladen was.
Als je de afbeelding in een html-pagina wilt weergeven, kun je met de <img>-tag gewoon het php-bestand aanroepen, zoals je bij een jpeg ook zou doen.
Ikzelf ga voor png. PNG is kleiner dan jpeg, beter dan gif en kan hetzelfde.. Waarom niet?
Als het goed is heb je voor een formaat gekozen. Dan ga je eerst een header verzenden:
<?php
header('Content-type: image/gif');
?>
Als je een ander bestandsformaat heb gekozen, zet je in plaats van gif, gewoonweg het betreffende bestandsformaat neer.
Om de afbeelding te weergeven gebruik je de expressie imagegif voor gif-afbeeldingen. Bij een ander bestandsformaat vervang je gif voor dat bestandsformaat.
<?php
header('Content-type: image/gif');
imagegif($afbeelding);
imagedestroy($afbeelding);
?>
Met de expressie imagedestroy maak ik het geheugen van de computer vrij, omdat de afbeelding daarin geladen was.
Als je de afbeelding in een html-pagina wilt weergeven, kun je met de <img>-tag gewoon het php-bestand aanroepen, zoals je bij een jpeg ook zou doen.
Pagina 4
Lijnen en vierhoeken
Lijnen trek je met de expressie imageline(). Imageline lust 6 parameters. Eén voor de afbeelding waarop je de lijn wilt zeten. Vier voor de begin- en eindpunten en één voor de kleur.
bool imageline ( resource image, int x1, int y1, int x2, int y2, int color )
Als je in een afbeelding van 80 bij 15 pixels (x = 80 en y = 15) een wit kruis wilt tekenen, doe je dat zo (nadat je een lege afbeelding hebt aangemaakt).

Vierhoeken maak je met de expressie imagfilledpolygon. Je kan hem ook gebruiken om Vijf-, zes-, zeven-, acht-, negen- en tienhoeken (meer kan ook) te maken. De expressie lust 4 parameters. De eerste is weer de afbeelding waarop je de vier-of-meer-hoek wilt tekenen. De tweede is een array met coördinaten. De derde is het aantal punten en de laatste is weer de kleur.
bool imagefilledpolygon ( resource image, array points, int num_points, int color )
Stel dat ik de helft van de afbeelding met het witte kruis erin blauw wil hebben. Dan kan ik over de helft een vierhoek tekenen, zodat dat blauw wordt.

Je kunt ook de expressie imagepolygon gebruiken. Deze expressie heeft dezelfde syntax, maar heeft als enige verschil dat hij de meerhoek niet vult, maar alleen een kadertje tekent.
bool imagepolygon ( resource image, array points, int num_points, int color )
bool imageline ( resource image, int x1, int y1, int x2, int y2, int color )
Als je in een afbeelding van 80 bij 15 pixels (x = 80 en y = 15) een wit kruis wilt tekenen, doe je dat zo (nadat je een lege afbeelding hebt aangemaakt).
<?php
$kleur = imagecolorallocate($afbeelding ,255, 255, 255);
imageline($afbeelding, 0, 0, 80, 15, $kleur);
imageline($afbeelding, 0, 14, 80, 0, $kleur);
?>

Vierhoeken maak je met de expressie imagfilledpolygon. Je kan hem ook gebruiken om Vijf-, zes-, zeven-, acht-, negen- en tienhoeken (meer kan ook) te maken. De expressie lust 4 parameters. De eerste is weer de afbeelding waarop je de vier-of-meer-hoek wilt tekenen. De tweede is een array met coördinaten. De derde is het aantal punten en de laatste is weer de kleur.
bool imagefilledpolygon ( resource image, array points, int num_points, int color )
Stel dat ik de helft van de afbeelding met het witte kruis erin blauw wil hebben. Dan kan ik over de helft een vierhoek tekenen, zodat dat blauw wordt.
<?php
/* Let goed op, de eerste van iedere regels is NIET de sleutel,
maar de x. X Y */
$punten = array( 0, 0,
40, 0,
40, 15,
0, 15
);
$afbeelding = imagecreatetruecolor(80, 15);
// Ik definiëer een kleur. De kleur is van het RGB (Red Green Blue of Rood Groen Blauw) formaat.
$kleur = imagecolorallocate($afbeelding ,255, 255, 255);
$blauw = imagecolorallocate($afbeelding, 0, 0, 255);
imagefilledpolygon($afbeelding, $punten, 4, $blauw);
imageline($afbeelding, 0, 0, 80, 15, $kleur);
imageline($afbeelding, 0, 14, 80, 0, $kleur);
?>

Je kunt ook de expressie imagepolygon gebruiken. Deze expressie heeft dezelfde syntax, maar heeft als enige verschil dat hij de meerhoek niet vult, maar alleen een kadertje tekent.
bool imagepolygon ( resource image, array points, int num_points, int color )
Pagina 5
Tekst
Ook kun je op een afbeelding wat schrijven. Daar zijn twee mogelijkheden voor. Een standaard lettertype en een zelf gekozen lettertype.
Ik begin maar eens met het standaard lettertype. Op deze manier een tekst schrijven gaat met behulp van de expressie imagestring. De expressie slikt 5 parameters. De eerste is weer de afbeelding waar de tekst op moet komen. De tweede de lettergrootte. De derde en de vierde de coördinaten en de vijfde is de kleur.
bool imagestring ( resource image, int font, int x, int y, string s, int col )
Als we even verder gaan met het prachtige - inmiddels op een vlag lijkende - afbeelding, krijgen we dit:

De andere manier is om het met een zelfgekozen lettertype te doen. En wel met de expressie imagettftext. Voor meer informatie over deze expressie bekijk je de php.net handleiding, omdat die een stuk uitgebreider is dan dat ik jullie (zal) vertel(len): http://nl3.php.net/manual/nl/function.imagettftext.php. Ook raad ik je aan om de graffitimuur van Jelmer eens te bekijken: http://www.phphulp.nl/php/scripts/9/434/
Ik begin maar eens met het standaard lettertype. Op deze manier een tekst schrijven gaat met behulp van de expressie imagestring. De expressie slikt 5 parameters. De eerste is weer de afbeelding waar de tekst op moet komen. De tweede de lettergrootte. De derde en de vierde de coördinaten en de vijfde is de kleur.
bool imagestring ( resource image, int font, int x, int y, string s, int col )
Als we even verder gaan met het prachtige - inmiddels op een vlag lijkende - afbeelding, krijgen we dit:
<?php
/* Let goed op, de eerste van iedere regels is NIET de sleutel,
maar de x. X Y */
$punten = array( 0, 0,
40, 0,
40, 15,
0, 15
);
$afbeelding = imagecreatetruecolor(80, 15);
// Ik definiëer een kleur. De kleur is van het RGB (Red Green Blue of Rood Groen Blauw) formaat.
$kleur = imagecolorallocate($afbeelding ,255, 255, 255);
$blauw = imagecolorallocate($afbeelding, 0, 0, 255);
imagefilledpolygon($afbeelding, $punten, 4, $blauw);
imageline($afbeelding, 0, 0, 80, 15, $kleur);
imageline($afbeelding, 0, 14, 80, 0, $kleur);
imagestring($afbeelding, 5, 0, 0, 'Hoi!', $kleur);
?>

De andere manier is om het met een zelfgekozen lettertype te doen. En wel met de expressie imagettftext. Voor meer informatie over deze expressie bekijk je de php.net handleiding, omdat die een stuk uitgebreider is dan dat ik jullie (zal) vertel(len): http://nl3.php.net/manual/nl/function.imagettftext.php. Ook raad ik je aan om de graffitimuur van Jelmer eens te bekijken: http://www.phphulp.nl/php/scripts/9/434/
Pagina 6
Leuk, maar wat kun je ermee?
Bijvoorbeeld een digitale graffitimuur maken. Maar het is ook heel goed mogelijk om foto’s te bewerken en te manipuleren. Je kunt er wiskundige grafieken mee maken. Denk aan y = ax+b bijvoorbeeld.
Met een random nummertje en de expressie imagestring, kun je een (al dan niet volledig veilig) CAPTCHA systeem maken. Je kunt op upgeloade foto’s een watermerk zetten, of een ‘inschrift’ (onderschrift op de foto :c)).
Met een random nummertje en de expressie imagestring, kun je een (al dan niet volledig veilig) CAPTCHA systeem maken. Je kunt op upgeloade foto’s een watermerk zetten, of een ‘inschrift’ (onderschrift op de foto :c)).
Reacties
0