[Basiert auf dem Code von @lex - Siehe seine Steam-Signatur]
Wozu eine dynamische Signatur?
Manchmal möchte man (in Foren beispielsweise) eine Signatur einbinden, die sich von selbst heraus aktualisiert. Das ist nicht nur Spielerei, sondern kann auch durchaus für sinnvolle Zwecke verwendet werden, Anwendungsbeispiele sind zum Beispiel:
- Countdowns (Noch xx Tage bis zu yy)
- Zufallsgenerierte Sprüche / Informationen
- Den Benutzer direkt ansprechen (Hey, deine IP ist XX und du benutzst [dein Browser]!)
Die Anwendungsbereiche sind sehr frei wählbar. Während es fast nie möglich ist, eigene PHP Scripte in die Signatur einzubinden (wegen der hohen Gefahr des Missbrauchs), ist es jedoch fast immer möglich, ein PHP-Bild einzubinden - das heißt, dass PHP-Script liefert sich selbst als Bild zurück. Doch dazu erstmal ein bisschen Grundlagenwissen.
Grundlagen
Viele Leute, die gerade mit PHP beginnen, betrachten PHP als eine Art Quellcode, der standardmäßig in HTML eingefügt wird, ein HTML Dokument generiert oder auf HTML basiert. Doch dies ist nicht so. Doch zunächst eine kleine Frage zu Anfang:
Wie schafft es Mozilla Firefox zum Beispiel, eine HTML Datei zu verarbeiten und zu erkennen, dass der Benutzer im Moment eine HTML-Datei anzeigt und keine Bilddatei beispielsweise? Viele Leute denken, dies liegt an der Dateiendung. Doch dem ist (siehe der Beweis
hier ) nicht so.
Der Grund dafür, dass eine HTML-Datei als HTML-Datei und eine JPG-Datei als JPG-Datei erkennt wird, ist viel banaler. Der Browser bekommt nämlich längst nicht nur das übermittelt, was wir wirklich im Browserfenster sehen können. Es wird nämlich auch ein sogenannter MIME-Typ übermittelt, der festlegt, welchen Inhalt die Datei hat. Für eine HTML-Seite beträgt der beispielsweise
text/html, für ein JPEG-Bild image/jpeg und für eine ZIP-Datei application/zip.
Dieser Wert wird vom Browser ausgegeben. Alles was wir machen müssen, ist also das PHP Dokument den MIME-Typ image/jpeg ausgeben zu lassen - auf die gleiche Art und Weise ist es übrigens auch möglich, dynamisch ZIP-Dateien zu erstellen und Vieles mehr.
Für mein Testdokument mit JPEG-Dateiname aber HTML-Dateityp gibt Firefox beispielsweise folgendes aus:
Content-Type in PHP
Jetzt, da wir die Grundlagen kennen, ist es auch möglich, das Ganze in PHP zu Programmieren. Einen Content-Type übermittelt man in PHP mit dem Befehl:
|
PHP-Quelltext
|
1
|
header("Content-Type: image/jpeg");
|
Im Weiteren Tutorial werde ich jedoch PNG benutzen, da dies unter anderem den Vorteil von Transparenz bietet. Dafür lautet der Befehl
|
|
PHP-Quelltext
|
1
|
header("Content-Type: image/png");
|
Doch so einfach ist es auch nicht, dass wir danach einfach
print("") oder
echo("") benutzen können. Wenn das doch versucht wird,
wird der Browser das mit einer schönen Fehlermeldung protokollieren. Wir müssen auf die GDLib-Funktionen, die bei PHP standardmäßig mitinstalliert sind (php5-gd2) zurückgreifen, um solch ein Bild zu erstellen.
Erzeugen und Vorbereiten mit GDLib
Um jetzt ein Bild zu erzeugen, müssen wir erstmal - wie wenn man ein neues Bild bei Photoshop oder GIMP erstellt - die Größe definieren, die das Bild auszeichnet. Da das Ganze eine Signatur werden soll, empfehle ich eine Größe von 300x60 Pixel, die für die meisten Textinformationen ausreicht. Dies geht so, indem ein neues Image-Objekt erstellt wird. Dieses Objekt wird gleich in einer Variable gespeichert, da wir über diese Variable später auf das Bild zugreifen - mit der Funktion
ImageCreate(Breite, Höhe)
|
|
PHP-Quelltext
|
1
|
$img = ImageCreate(300,60);
|
Um jetzt ein funktionierendes Bild hinzubekommen, müssen wir - in Gegensatz zu Photoshop etc. - alle Farben definieren. Diese Farbe kann weiß, schwarz, rot, lila, rosa.. oder durchsichtig sein. Die Angaben sind hier im RGB-Format (Rot, Gelb, Blau - Anteil mit 0 - 255) und müssen die Variable, in der wir das Objekt geladen haben, beinhalten. Die Funktion lautet ImageColorAllocate(Variable, Rot, Gelb, Blau)
|
|
PHP-Quelltext
|
1
2
3
4
5
|
$rot = ImageColorAllocate($img, 255,0,0);
$gelb = ImageColorAllocate($img,0,255,0);
$blau = ImageColorAllocate($img,0,0,255);
$weiss = ImageColorAllocate($img,255,255,255);
$schwarz = ImageColorAllocate($img,0,0,0);
|
Jetzt haben wir erstmal die 3 Grundfarben abgedeckt. Um weitere Farben (Grün beispielsweise) herzustellen, müssen wir einfach unser Gedächtnis aus der Grundschule anstrengen: Wie bekam man beim Malen mit Wasserfarbe nochmal Grün hin? Richtig, indem man Blau und Gelb gemischt hat.
|
|
PHP-Quelltext
|
1
2
3
|
$gruen = ImageColorAllocate($img,0,255,255); //Gelb und Blau quasi 'überlagert'
$orange = ImageColorAllocate ($img,255,255,0); //Gelb und Rot quasi 'überlagert'
$violett = ImageColorAllocate($img,255,0,255); //Blau und Rot quasi 'überlagert'
|
Da es hier aber um dyanmische Signaturen und nicht um Farbentheorie geht, klären wir weitere fundamentale Fragen.
Bevor wir irgendwelchen Text oder andere Dinge einfügen können, legen wir ersteinmal den Hintergrund des Bilds fest. Dieser soll - wie bei Signaturen so üblich - transparent sein.
Um bei PNG eine Transparenz zu verursachen, müssen wir eine Farbe im Dokument als Transparent kennzeichnen - diese Farbe wird dann als transparent dargestellt. Da ich Weiß sonst nicht benutze, lege ich mit der Funktion
ImageColorTransparent(Bildobjekt, Farbe) es so fest, dass Weiß die transparente Farbe darstellt.
|
|
PHP-Quelltext
|
1
|
ImageColorTransparent($img, $weiss);
|
Natürlich müssen wir jetzt noch mit der Funktion imagefill(Bildobjekt, X-wert, Y-wert) die Hintergrundfarbe festlegen. Hier nehm ich direkt die Farbe weiß:
|
|
PHP-Quelltext
|
1
|
imagefill($img,0,0,$weiss);
|
Jetzt benötigen wir noch die Funktion Imagepng(Bildobjekt) um das Bild abzuschließen:
|
|
PHP-Quelltext
|
1
|
Imagepng($img);
|
Fertig ist unser erstes Bild! Sieht aber noch etwas langweilig aus, da es nur eine öde, transparente Fläche darstellt. Quelltext hier:
erste_sig.pdf
Text einfügen per GDLib
Soweit, So gut. Aber um wirklich dynmisch etwas generieren zu können, sollte sich auch etwas an dem Bild ändern - eine leere transparente Fläche oder eine transparente Fläche mit Text darauf, der sich nie ändert, kann man genauso gut auch in Photoshop erstellen. Die Funktion dafür ist jedoch schon komplizierter: imagestring(Bildobjekt, Schriftgröße, X-Koordinate, Y-Koordinate, Text, Farbe).
Ein Text an der linken oberen Ecke (mit etwas Abstand, damit es nicht wirklich direkt am Rand klebt) sieht zum Beispiel so aus:
|
|
PHP-Quelltext
|
1
|
imagestring($img, 5,5,5,"Halli-Halloeschn", $schwarz);
|
Ergebnis davon sieht man
hier.
Das könnte ich aber natürlich auch jederzeit per Photoshop mit viel weniger Aufwand herstellen. Deswegen füge ich jetzt eine Dynamische Komponente dazu. Das einfachste hier natürlich: Das anzeigen das aktuellen Datums!
|
|
PHP-Quelltext
|
1
|
imagestring($img, 5,5,5,"Aktuelle Zeit: " . date("d.m.Y. H:i:s"), $schwarz);
|
Hier das Ergebnis des Ganzen, das sich automatisch aktualisiert, wenn es neugeladen wird.
Der komplette Quelltext befindet sich hier:
|
|
PHP-Quelltext
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?php
header("Content-Type: image/png");
$img = ImageCreate(300,60);
//Farben
$rot = ImageColorAllocate($img, 255,0,0);
$gelb = ImageColorAllocate($img,0,255,0);
$blau = ImageColorAllocate($img,0,0,255);
$weiss = ImageColorAllocate($img,255,255,255);
$schwarz = ImageColorAllocate($img,0,0,0);
$gruen = ImageColorAllocate($img,0,255,255); //Gelb und Blau quasi '�berlagert'
$orange = ImageColorAllocate ($img,255,255,0); //Gelb und Rot quasi '�berlagert'
$violett = ImageColorAllocate($img,255,0,255); //Blau und Rot quasi '�berlagert'
//Farbe Transparent machen
ImageColorTransparent($img, $weiss);
//Hintergrundsfarbe
imagefill($img,0,0,$weiss);
//Unser Erster Text
imagestring($img,5,5,5,"Aktuelle Zeit:" . date("d.m.Y H:i:s"),$schwarz);
//Fertigstellen
Imagepng($img);
?>
|
Weitere Beispiele ist zum Beispiel folgender Geburtstagscountdown den ich für einen Freund entwickelt hab (dessen Geburtstag jetzt schon her ist, weswegen der Counter ins Negative läuft):
http://www.nico-meier.de/webspace/basti2.php
Setzt der Kreativität da keine Grenzen und versucht es einfach aus!
Liebe Grüße
Mittwoch, 23. Mai 2012, 14:35
Zum Seitenanfang
