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:
$SigUsername bevat de gebruikersnaam die op de signature moet staan
$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!
$SigBackground bevat de achtergrond van onze signature: een lege signature zonder text erop! Het is louter een achtergronddus.
$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!
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.
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.
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.
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.
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.
comment_629359De 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:
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!
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: door ViceAgent