Grafiken erstellen über PHP

PHP eignet sich hervorragend, Grafiken zu erzeugen bzw. zu manipulieren. PHP kann z. B. eine E-Mail-Adresse in eine Grafik umwandeln (gut gegen Spam-Roboter) oder grafische Counter erstellen (fertiger Hintergrund wird mit aktueller Zahl ergänzt). Auch CAPTCHA-Grafiken (zur Kontrolle, ob Eingabe von Roboter oder Mensch stammt) sind Beispiele für on-the-fly-erzeugte Grafiken.

Oft werden Sie auf Website bei einer cleveren Verwendung von Text und Grafik den Unterschied nicht sehen – wenn Sie mit der rechten Maustaste darauf klicken, sehen Sie an dem Punkt „Grafik anzeigen“, dass es sich um eine Grafik handelt. Ob so eine Grafik on-the-fly erstellt werden muss oder bereits vorhanden ist, ist immer abhängig von der Anwendung und der Zielsetzung.

Grundsätzliche Schritte beim Grafik Erzeugen mit PHP

Es werden i. d. R. folgende 5 Schritte benötigt:

  • Größe der Grafik wird als Rechteck definiert
  • Benötigte Farben werden definiert
  • Formen (Rechtecke, Kreise, Ellipsen) werden auf der Grafik platziert. Schrift wird platziert
  • Ausgabe der Grafik (entweder direkt auf Bildschirm oder als Datei)
  • Speicher wird wieder freigegeben

PHP-Grafiken in HTML platzieren

Grafiken können zur direkten Ausgabe über HTML platziert werden. Der Aufruf im HTML-Code geschieht dann über die PHP-Dateinamen.

PHP-Quellcode: Einbinden einer Grafik
<img src="on-the-fly-grafik.php">

Für ein sauberes HTML sollten noch die Breite und die Höhe angegeben werden. In der PHP-Datei "on-the-fly-grafik.php" wird die Grafik erzeugt und dann dem HTML zur Verfügung gestellt. Im folgenden Beispiel werden 3 Rechtecke auf schwarzem Grund erstellt und ausgegeben.

Beispiel Grafik erstellen mit PHP: Quadrate auf schwarzen Grund

PHP-Quellcode: Inhalt der PHP-Datei on-the-fly-grafik-php
<?php
header("Content-type: image/png");
// erstellen eines leeren Bildes mit 400px Breite und 300px Höhe
$bild = imagecreatetruecolor(400, 300);
// Hintergrundfarbe erstellen
imagecolorallocate($bild, 150, 150, 0);
 
// Farben festlegen
$farbe1 = imagecolorallocate($bild, 255, 255, 0);
$farbe2 = imagecolorallocate($bild, 0, 255, 0);
$farbe3 = imagecolorallocate($bild, 0, 0, 255);
// Viereck zeichen
// mit folgenden Kordinaten (x1, y1, x2, y2, Farbe);
imagefilledrectangle ($bild, 20, 75, 350,250, $farbe1);
imagefilledrectangle ($bild, 150, 100, 200, 280, $farbe2);
imagefilledrectangle ($bild, 220, 150, 330, 190, $farbe3);
// Ausgabe des Bildes
imagepng($bild);
?>

Aufgabe:

Erstellen Sie folgende Grafik:

Grafiken mit PHP erstellen: Aufgabe

In der Erweiterung zu den Rechecken benötigen Sie die Funktion zum Ellipsen Zeichnen:

imagefilledellipse($bild, 200, 150, 300, 200, $farbe);

Diese hat den Aufbau:
(x-Koordinate der Mitte, y-Koordinate der Mitte, Breite, Höhe, Farbe)

Die komplett nur von PHP erstellten Grafiken sind meistens nicht besonders künstlerisch wertvoll (vielleicht hilft eine kreative Malschule:). Wenn Sie bereits eine fertige Grafik haben, gibt es interessante Möglichkeiten von PHP, auf bestehenden Grafiken weitere Grafiken, bzw. Text legen zu lassen und dies dann als eine neue Grafik anzuzeigen, wie Sie sich im folgenden Abschnitt ansehen können.

Mit PHP einen Text in Grafik integrieren

Um Text in ein Bild zu bringen, gibt es den Befehl ImageString. Diesem kann über 1 bis 5 eine Textnummer als Größe mitgegeben werden (einfach ausprobieren).

PHP-Quellcode: Text als Grafik erstellen
<?php
$textnr = 4;
header ("Content-type: image/png");
$bild = imagecreate (400 , 50);
imagecolorallocate ($bild, 0, 0, 0);
$text_farbe = ImageColorAllocate ($bild, 255, 255, 0);
 
ImageString ($bild, $textnr, 0, 0, "Hallo Welt", $text_farbe);
ImagePNG ($bild);
?>

Grafik erstellen mit PHP: E-Mail-Adresse als Grafik

Aufgabe: mit PHP eine E-Mail als Grafik ausgeben

Erstellen Sie ein Programm, das einen Text in eine Grafik umwandelt (Ihre eigene E-Mail-Adresse). Die Funktion können Sie testen mit dem Programm: E-Mail in Grafik umwandeln.

Die Herausforderung ist: die Grafik soll exakt so groß sein wie der Text Platz benötigt. Dabei müssen Sie die Größe der Grafik berechnen. Dafür gibt es die folgenden Befehle.

imagefontwidth($textnr) – berechnet die benötigten Pixel pro Zeichen für die Breite, in der Klammer wird die Nummer des verwendeten Textes mitgegeben

$texthoehe = imagefontheight($textnr) – berechnet die benötigten Pixel pro Zeichen für die Höhe, in der Klammer wird die Nummer des verwendeten Textes mitgegeben.

Zur Erinnerung: strlen($text) gibt die Anzahl der Zeichen in einem String aus.

Zum Vergleich des eigenen Lösungswegs gibt es den Quellcode: E-Mail als Grafik.