PHP Maniac

Das PHP Blog für PHP-Profis und alle die es werden wollen

Dynamische Bilder mit PHP erzeugen

14 Mai, 2009 (13:59) | Code-Schnipsel, HTML, Tipps und Tricks | Von: PHP Maniac

Die Ausgabe von Text und HTML Code mit PHP ist eine alltägliche Arbeit. Mit Hilfe der PHP Erweiterung GDLib lassen sich aber auch sehr einfach Bilder mit dynamischen Inahlt erzeugen. Um dies zu demonstrieren möchte ich heute ein kleines Skript vorstellen, dass das aktuelle Datum und die Uhrzeit ausgibt. Das entstandene PHP Skript lässt sich ganz einfach in einen IMG Tag einbinden. Somit eignet sich diese Methode z.B. zur Erstellung von Signaturen für Foren.

Die GDLib Extension von PHP stellt umfangreiche Möglichkeiten zur Bilderzeugung oder Bildmanipulation zur Verfügung. Neben JPEGs lassen sich auch PNGs und GIFs bearbeiten und Erstellen. Im meinem Beispiel möchte ich jedoch zunächst eine vorhandene Bilddatei einlesen, um diese mit Hilfe von PHP mit dynamischen Inhalt zu erweitern. Dieses Verfahren bietet sich an, da aufwändige Hintergrundbilder mit PHP und der GDLib eher schwer zu erzeugen sind. Ich gestalte die Hintergründe also vorher mit Photoshop und binde diese dann mit PHP ein.

$im = imagecreatefromgif("background.gif");

$red = imagecolorallocate($im, 255, 80, 80);
$black = imagecolorallocate($im, 0, 0, 0);

$x = 10;
$y = 30;

imagestring($im, 3, 10, $y, "Die aktuelle Uhrzeit:", $black);

$y+=30;
imagestring($im, 3, $x, $y, date("d.m.Y H:i:s", time()), $red);

$y+=10;

header("Content-type: image/gif");
imagegif($im);
imagedestroy($im);

Das obige Skript erstellt zunächst ein Image-Handle, welches im weiteren Verlauf für den Zugriff auf die Bildressource benötigt wird. Die Funktion imagecreatefromgif() erstellt ein solches Handle und liest die als Parameter übergebene Bilddatei ein. Somit erhalten wir Zugriff auf den Inhalt des Bildes und können nun unseren dynamischen Inhalt einbinden. Zunächst definiere ich allerdings noch zwei Farben, für die Schrift. Dies geschieht über die Funktion imagecolorallocate(), die mit Hilfe des Image-Handles und dem RGB Wert der gewünschten Farbe.

$color = imagecolorallocate($handle, $red, $green, $blue);

Da wir nun Zugriff auf das Bild haben und auch zwei verschiedene Farben vorbereitet haben, können wir nun direkt Text in das Bild einfügen:

imagestring($handle, $font, $x, $y, $text);

Die x/y Koordinaten zeigen hierbei die linke, obere Ecke des Schriftzugs in Pixeln an. Ich habe mir bei der Ausgabe von Text angewöhnt die y-Koordinate langsam im Skript zu erhöhen, da es eher selten ist, dass man zweimal Text auf die gleiche Höhe schreiben möchte. Aber dies kann natürlich jeder, je nach Einsatzzweck, für sich selbst entscheiden.

Nachdem wir die Schrift ins Bild eingefügt haben, können wir uns um die Ausgabe kümmern. Hierzu gaukeln wir dem Browser mit Hilfe der header() Funktion vor, dass es sich bei der aktuellen Datei um ein GIF Bild handeln würde:

header("Content-type: image/gif");
imagegif($im);
imagedestroy($im);

Die Funktion imagegif() gibt dann den Inhalt des Bild-Handles aus, der mittlerweile aus unserem Hintergrundbild und dem eingefügten Text besteht. Imagedestroy() räumt schließlich noch für uns auf und gibt den Speicher des Bild-Handles frei. Um das Bild nun in eine Webseite einzubinden, kann man ganz normal vorgehen und einen IMG Tag verwenden:

<img src="bilder_dynamisch_mit_php_erzeugen.php">

Natürlich können auch Parameter an das Skript übergeben werden, um den Text dann auf dem Bild auszugeben. Anzumerken ist an dieser Stelle noch, dass das eingebundene Hintergrundbild NICHT verändert wurde. Will man eine Kopie des neu erstellten Bildes speichern, so lässt sich bei der Funktion imagegif() ein optionaler, zweiter Parameter einsetzen:

imagegif($im, "neues_bild.gif");
imagedestroy($im);

Die Funktionen zum Arbeiten mit PNG oder JPEG Dateien haben übrigends die gleichen Namen und funktionieren identisch, lediglich das angehängte „gif“ der Funktionsnamen ist durch „png“ oder „jpg“ auszutauschen. Soviel zur Erstellung von Bildern mit dynamischen Inhalt. Wie immer sind Kommentare, Anmerkungen oder Fragen willkommen!

Be Sociable, Share!

Kommentare

Kommentar von Ego
Datum 15. Mai 2009 um 23:05 Uhr

Interessant zu lesen 🙂

Kommentar von Long Hoang
Datum 20. Februar 2010 um 18:09 Uhr

Mit der GD Lib hab ich meine Signaturenbilder gemacht:
http://www.galaxyserver.de/sig-box/pbox,4.png

Beim Reload steht dann ein anderer Text aus der sig-box Datenbank

Kommentar von PHP Maniac
Datum 20. Februar 2010 um 18:14 Uhr

Jo, für Signaturbilder habe ich die GD-Lib auch schon verwendet. Bietet sich überhaupt überall dort an, wo man nur Bilder einbinden kann und kein HTML.

Schreibe einen Kommentar