[Tutorial|PHP] Afbeeldingen (GD)

[ViceAgent]

De laatste tijd komen er hier erg veel vragen over dynamische signatures, oftewel plaatjes die zichzelf updaten zonder telkens een nieuwe te hoeven maken. Om een voorbeeld te noemen, countdown signatures van GTA: IV. Deze afbeeldingen worden gecreëerd door PHP, maar weergeven als een PNG afbeelding. In dit tutorial zal ik je uitleggen hoe dit allemaal in z'n werk gaat, hopelijk duidelijk.

Kopiëren is toegestaan, maar alleen als je hem op een website plaats waar niet wordt vermeld dat ik hem heb geschreven, je mag dus gerust zeggen dat jij hem zelf gemaakt hebt. Ik hoop dat ik je er niet op betrap toch mij de credits te geven!

Wat heb je nodig?

Erg veel heb je hier niet voor nodig, alleen een server met daarop PHP geïnstalleerd, en de "GD Library Plugin". Deze kun je hier gratis downloaden. Vanaf PHP versie 4.3 is deze GD library automatisch inbegrepen. Er zijn een aantal goede gratis hosts die GD ondersteunen, persoonlijk adviseer ik je "Funpic", een zeer goede en gratis host, die helaas wél Duits is.

Je hebt enige voorkennis van PHP nodig, om het kort samen te vatten moet je de basis structuur van een PHP-document begrijpen, variabelen/arrays en het gebruik van functies kennen. Een PHP-editor zou handig zijn, dit is echter geen vereiste. Ook moet je weten hoe je een document moet uploaden. Op dit forum zijn een aantal goede tutorials voor het bovenstaande te vinden, bekijk hiervoor de Master Tutoria l List maar eens :-).

Het begin

We beginnen gewoon met een simpel PHP-document: een opentag, een sluittag en daartussenin een aantal variabelen die wat kenmerken van onze signature bevatten. Let goed op het commentaar: hier staat het een en ander in uitgelegd. Allereerst even een overzichtje:

1. $SigUsername bevat de gebruikersnaam die op de signature moet staan
   
2. $SigFont bevat de font waarmee de text wordt weergeven. Dit moet een lettertype met de extentie "TTF" zijn, en deze moet in dezelfde map staan geupload!
   
3. $SigBackground bevat de achtergrond van onze signature: een lege signature zonder text erop! Het is louter een achtergronddus.
   
4. $SigTxtSize bevat de tekstgrootte.
   

<?php
// Definieer een aantal variabelen
 $SigUsername = "ViceAgent"; // Gebruikersnaam
 $SigFont = "/font.TTF"; // Zie hierboven, hoe dit werkt
 $SigBackground = "./background.png"; // De achtergrond, met een PNG extentie(!)
 $SigTxtSize = 15; // Lettergrootte 
?>

Zo, dit wordt de basis van ons scriptje, een aantal variabelen met daarin wat cruciale waarden. Let er wel op dat je signature van PNG formaat is, JPEG en GIF kan ook, maar dan zal dit script niet werken. Het gebruik van GIF afbeeldingen raad ik overigens af, hier is de laatste tijd veel heibel over geweest (m.b.t. copyright op het GIF-compressie filter, vergeet dit trouwens maar). Wat we nu gaan doen, is onze signature creëren en vervolgens de tekst op de afbeelding zetten, vervolgens laten we PHP de afbeeldingen tonen. Op zich is je signature dan klaar, voor de afhandeling moet je zelf zorgen. Dit is dus geen script dat een kant en klare countdown signature laat tonen, maar het ontwerp van zo'n dynamische afbeelding. Een overzicht van de gebruikte functies, dit is zeer belangrijk!

1. ImageCreateFromPNG($SigBackground) is een functie die de achtergrond van ons plaatje (in dit geval dus SigBackground in het PHP bestand importeert, dit zal de basis worden van ons hele script, daarom noemen we deze "$ImgHandler". De waarde moet de link naar het achtergrond plaatje bevatten.
   
2. ImageColorAllocate($ImgHandler, 255, 255, 255) is een functie die een kleur genereert, de eerste waarde moet verwijzen naar het plaatje (let op, niet een link naar het plaatje, maar de "Handler", oftewel de variabele die we met de vorige functie hebben gecreëerd. Dit is een RGB waarde, in dit geval wit.
   
3. ImageTTFText is ook een belangrijke functie, en een lange! In deze functie schrijven we de text op ons plaatje. In dit geval schrijven we enkel onze naam, maar we kunnen er natuurlijk ook een countdown op weergeven, of het laatste weerbericht, een chat, noem maar op! Aangezien dit zo'n lange functie is, licht ik die in het script zelf toe.
   
4. ImagePNG($ImgHandler) is de "finishing touch", deze weergeeft je plaatje. Let op, het bestand heeft nog steeds een PHP extentie, je kan hem hier dus niet als signature instellen. Wat je echter welk kan doen, is een MOD_REWRITE maken, wat o.a. Jarno, Summerbase en Argon ook doen. Hier ga ik niet verder op in, maar ik ken iemand die dat wel doet - Google Overigens kun je hier nog meer opties aan toevoegen dan alleen $ImgHandler, maar deze laat ik nu achterwege.
   
5. ImageDestroy($ImgHandler) is eigenlijk een overbodige functie, deze maakt wat meer geheugen vrij door de afbeelding weer uit 't geheugen te verwijderen. Dit heeft geen effect op je afbeelding, maar het staat wel zo netjes. Overigens doet PHP dit automatisch als het script eindigt, het is dus niet noodzakelijk.
   

Laten we het script er maar weer bijpakken, en de nodige aanvullingen doen.

<?php
## Definieer een aantal variabelen ##
 $SigUsername = "ViceAgent"; // Gebruikersnaam
 $SigFont = "/font.TTF"; // Zie hierboven, hoe dit werkt
 $SigBackground = "./standard.png"; // De achtergrond, met een PNG extentie(!)
 $SigTxtSize = 15; // Lettergrootte

## Maak plaatje aan ##
 $ImgHandler = Imagecreatefrompng($SigBackground);  // De "Image Resource" (zie hierboven)

## Stel de tekstkleur in ##
 $ImgTextColor = ImageColorAllocate($ImgHandler, 0, 0, 0); // Zie hierboven, deze kleur is echter zwart(!) 

## Zet onze naam op het plaatje ! ##
 ImageTTFText($ImgHandler, $SigTxtSize, 0, 100, 75, $ImgTextColor, $SigFont, $SigUsername); 

/** Als eerste dus de "Image Resource", dan de tekstgrootte, een 0, het X-coördinaat (breedte) en het Y-coördinaat (dit geeft dus aan op welke positie de text komt te staan), tekstkleur, lettertype, en dan de text! **/ 

## Laat de browser weten dat het om een plaatje gaat ##
header("Content-type: image/png");

## Weergeef onze afbeelding ##
ImagePNG($ImgHandler);

## Sluit af ##
ImageDestroy($ImgHandler);
?>

Tadaa! Je signature! Je kunt de functie "ImageTTFText" zo vaak aanroepen als je wil, en dus zoveel text weergeven als je wil. Zoals ik al eerder zei kun je hier dus de tijd, countdowns, chats, verjaardagen en nog veel meer text weergeven. Ook kun je bijvoorbeeld elke keer een ander plaatje laten weergeven, dit is echter wat ingewikkelder en daar ga ik nog niet op in. Dit kan eventueel in een later (ervarener) tutorial worden toegevoegd.

Ik hoop dat je er wat van hebt geleerd, of dat 't op zijn minst bruikbaar is! Hier is mijn voorbeeld. Erg simpel, maar kan dus uitgebreid worden. Let overigens niet op de lelijke achtergrond, 't ging om het script.

Bewerkt: 9 maart 2007 door ViceAgent

[Flitskikker]

Goede tutorial.

Hier zocht ik al jaren naar .

Dit is mijn uitkomst:

Klik

Kun je er ook voor zorgen dat de extensie .PNG wordt?

Dan kan ik hem namelijk als signature gebruiken.

Mvg,

Flitskikker

[ViceAgent]

Goede tutorial.

Hier zocht ik al jaren naar .

Dit is mijn uitkomst:

Klik

Kun je er ook voor zorgen dat de extensie .PNG wordt?

Dan kan ik hem namelijk als signature gebruiken.

Mvg,

Flitskikker

Hey Flitskikker, ik moet zeggen: zeer mooie uitkomst! Dit is inderdaad een mooi voorbeeld van de mogelijkheden. Je kan de extentie laten veranderen in "PNG" door een zogenaamde 'MOD_REWRITE' te maken, dit is niet zo lastig, maar veel hosts ondersteunen dit niet.. Ik zal je toch even de code geven, stel je host ondersteunt het wel. Funpic, bijvoorbeeld, ondersteund dit helaas niet.. Ook "Freehostia" heeft deze module niet op hun servers geïnstalleerd.

RewriteEngine On
RewriteRule ^countdown.png countdown.php [L]

Zet dit in 't bestand ".htacces" en klaar is Kees. Zoals ik al zei zal dit in veel gevallen niet werken omdat de module niet geïnstalleerd staat..

[Flitskikker]

Weet jij dan een gratis host die dit wel ondersteund? En hoe kan je zien of je host het ondersteund?

PS: Ik heb mijn sig nog even bijgewerkt met nog een extra tekstregeltje

PS2: Funpic.ORG is engels en niet duits. Funpic.DE is wel duits. Ik gebruik Funpic.org

Mvg,

Flitskikker

Bewerkt: 11 maart 2007 door Flitskikker

[ViceAgent]

Ik weet geen gratis host die dit ondersteund, maar ze zullen er vast wel zijn. Je kan overigens zien of je host een 'MOD_REWRITE' ondersteunt door het volgende PHP-bestand aan te maken:

<?php
echo phpinfo();
?>

Als je dit bestand aanroept krijg je alle informatie over de instellingen, en ook welke modules zijn geïnstalleerd. Zoek het textregeltje 'Modules' (Of druk op ctrl+f en typ in 'Modules') en kijk of de MOD_REWRITE genoemd staat. Is dit niet het geval, ondersteunt je host het helaas niet.

Bewerkt: 12 maart 2007 door ViceAgent

[Flitskikker]

Ik weet geen gratis host die dit ondersteund, maar ze zullen er vast wel zijn. Je kan overigens zien of je host een 'MOD_REWRITE' ondersteunt door het volgende PHP-bestand aan te maken:

<?php
echo php_info();
?>

Als je dit bestand aanroept krijg je alle informatie over de instellingen, en ook welke modules zijn geïnstalleerd. Zoek het textregeltje 'Modules' (Of druk op ctrl+f en typ in 'Modules') en kijk of de MOD_REWRITE genoemd staat. Is dit niet het geval, ondersteunt je host het helaas niet.

Dan krijg ik dit: Klik

[ViceAgent]

Oeps dit is inderdaad mijn fout! Er moet staan "echo phpinfo();" in plaats van een "_" ertussen. Sorry voor het ongemak maar ik hoop dat 't nu wel lukt. Ik pas het meteen even aan. :$ Slordigheidsfoutje.

Trouwens sorry Juul als ik je post inhaalde, je naam was me niet opgevallen als die er stond.

Bewerkt: 12 maart 2007 door ViceAgent

[Argon]

Dat is omdat de functie een beetje anders noemt

<?php
phpinfo();
?>

En een echo/print is ook niet meer nodig.

[Flitskikker]

Alle hosts waar ik een account heb (zijn er best veel) heb ik het bestandje geupload maar bij geen een staat er mod_rewrite tussen.

Mvg,

Flitskikker

[Rivel]

Pfff... Ik snap er niets van! Wat moet ik doen met GD? staan daar al die bestanden in? Die je opnoemde al die teksten zoals ImageColorAllocate($ImgHandler, 255, 255, 255) enzo???

Rivel

[-Roy-]

Alle hosts waar ik een account heb (zijn er best veel) heb ik het bestandje geupload maar bij geen een staat er mod_rewrite tussen.

Mvg,

Flitskikker

Http://gimyweb.de ondersteund het wel, als ik phpinfo(); moet geloven. Het is helaas wel in het duits, maar niet echt storend ofzo...

[ViceAgent]

Ik zal eens kijken Roy, het ziet er in ieder geval veelbelovend uit. Oh, en Rivel, hier vindt je meer informatie over hoe de GD-library te installeren, let er op dat dit alleen nodig hebt als je een PHP versie lager dan 4.3.0, op je eigen computer draait. Ik adviseer je dan ook gewoon een online host te nemen, als gimyweb.de of funpic.org

Ik hoop hiermee je vraag beantwoordt te hebben. Als het je dan nog niet lukt, ben ik bang dat je niet over de basiskennis beschikt, je kan echter altijd meer vragen PM'en of posten.

[Rivel]

Oke dan, dankje! Is het eigenlijk ook mogelijk een teller te maken in je signature die gewoon doorloopt? Dat de seconden gewooon doortikken? Zonder dat je je pagina refresht zoals bij de teller van(de naam onstchiet me even) die in mijn signature staat, want die beweegt niet iedere keer als jej e pagina herlaadt gaan de seconden pas anders! Maar gaat dit niet automatisch op een of andere manier?

Rivel

[ViceAgent]

Ik snap wat je bedoeld, maar dat is naar mijn weten niet mogelijk met GD.. Met 'Flash' is iets dergelijks weer wel mogelijk, maar die kun je niet als signature instellen. De teller die in je handtekening staat kan je hiermee wel maken, maar dan zul je 'm wel moeten herladen om hem te uploaden.. Jammer maar helaas. Mocht het tóch mogelijk zijn, dan hoor ik het graag.

[-Roy-]

Ik snap wat je bedoeld, maar dat is naar mijn weten niet mogelijk met GD.. Met 'Flash' is iets dergelijks weer wel mogelijk, maar die kun je niet als signature instellen. De teller die in je handtekening staat kan je hiermee wel maken, maar dan zul je 'm wel moeten herladen om hem te uploaden.. Jammer maar helaas. Mocht het tóch mogelijk zijn, dan hoor ik het graag.

Zou het niet mogelijk zijn dat als je javascript in een variabele opslaat, en deze dan vervolgens echo'ed op de signature? Op zich zou het moeten kunnen!