Grafiken erzeugt man doch am besten direkt mit JavaScript auf dem Client – grundsätzlich richtig, dennoch gibt es eine Reihe von Anwendungen, die man besser direkt im Backend generiert und sie zur Anzeige an den Browser übermittelt.

Bekanntermaßen teilen wir Webapplikationen in client- und serverseitige Technologien ein. Auch eine gemeinsame Verwendung beider Technologien ist möglich und sinnvoll. Das Erstellen von Grafiken, insbesondere wenn eine Nutzerinteraktion hinzukommt, ordnet man intuitiv und richtigerweise den Aufgaben des Clients zu. Dabei werden die Aktion des Nutzers, zum Beispiel ein Touch auf die Oberfläche, eine Drag-and-Drop-Bewegung mit der Maus usw. direkt über JavaScript ausgewertet und verarbeitet – das Ergebnis führt zu einer geänderten Anzeige. Dieser Ansatz führt auch zum Ziel, sofern alle Daten im Client für das Erstellen der Grafiken vorliegen und/oder eine schnelle Reaktion, zum Beispiel bei einem Zeichentool, gefragt ist. Es gibt aber auch eine Reihe Anwendungsfälle, bei denen man die Grafik statt im Client besser im Backend generiert und fix und fertig an den Browser übermittelt. Einige typische Anwendungsbeispiele sind:

• Captchas zur Abwehr automatisierter Formulareingaben

• Grafiken, die aus den Informationen einer referenzierten Datenbank generiert werden

• automatische Visualisierungen, etwa Infografiken, die datengestützt erstellt werden

Mit PHP können wir Grafiken für all diese Zwecke programmieren – möglich macht das die GD-Bibliothek, die auch das Thema dieses Artikels ist. Zwei grundsätzliche Anwendungsgebiete können wir beim serverseitigen Erstellen von Grafiken ausmachen. Anwendungsfall eins beschäftigt sich mit der Anzeige von Bildern und Fotos. Diese Bilder stammen i. d. R. aus einer Datenbank und wurden beispielsweise durch einen Nutzer in ein Webportal hochgeladen. Bevor die Bilder jedoch an den Client (Browser) für die Anzeige übermittelt werden, sind verschiedene Operationen mit der Bilddatei denkbar, um für eine entsprechende Qualität der Darstellung zu sorgen. Beispielsweise können wir die Bilder auf Größe und Auflösung prüfen. Entsprechen die festgestellten Eigenschaften nicht den Vorgaben, d. h., sind die Bilddateien zu klein (schlechte Qualität) oder zu groß (geringe Performance), weist man die Datei üblicherweise bereits beim Upload zurück. Der Vorteil: In der Datenbank landen nur Bilder, die den Vorgaben entsprechen. Ebenso können wir die Bilder vor der Auslieferung an den Client rudimentär bearbeiten. Zu solchen einfachen Methoden der Bildbearbeitung gehören: skalieren, spiegeln, einen Ausschnitt aus dem Bild erstellen oder Bilder teilweise oder vollständig ineinander einbetten.

Den zweiten größeren Anwendungsbereich sehen wir im Zeichnen von Grafikprimitiven, etwa Linien, Rechtecken, Kreisen, Ellipsen usw. Diese Objekte können entsprechend genutzt werden, um während der Laufzeit des Programms aus den auf dem Server vorliegenden Daten eine Grafik zu generieren. So können wir damit aus den Daten ein Balken- oder ein Liniendiagramm erstellen. Diese Aufgaben lassen sich alle mit der GD-Bibliothek [1] aus einem PHP-Programm direkt auf dem Server erledigen. In diesem Fall wird die Grafik erstellt (programmiert) und als Image (Bild) zum Client (Browser) übermittelt. Die GD-Bibliothek bietet eigentlich bereits alle notwendigen Funktionen. Dennoch kann man für Standardlösungen auch auf weitere Bibliotheken zurückgreifen, die wiederum intern auf der GD-Bibliothek beruhen, aber noch komfortabler vorgehen.

GD-Bibliothek in PHP aktivieren

Zunächst: Um was handelt es sich bei der Bibliothek GD und um was nicht? Antwort gibt die Dokumentation des Projekts [1]. LibGD liegt aktuell in Version 2.3.12 vor und ist eine Grafikbibliothek, die es ermöglicht, Bilder mit Linien, Bögen und Texten in mehreren Farben zu zeichnen. Ebenso kann man aus anderen Bildern Bereiche ausschneiden und einfügen, das Ergebnis kann als PNG- oder JPEG-Datei geschrieben werden. Wichtig: GD ist kein interaktives Malprogramm. GD ist in der Programmiersprache C geschrieben, kann aber serverseitig in PHP genutzt werden. Starten wir mit der Installation der Bibliothek. Wenn Sie die Test- und Arbeitsumgebung XAMPP verwenden, ist die die GD-Bibliothek ggf. schon installiert und als Erweiterung in PHP aktiviert. Ist das nicht der Fall, dann aktivieren Sie die Extension in der php.ini-Datei. Zuvor prüfen Sie bitte, ob php_gd.lib vorhanden ist, was normalerweise der Fall sein sollte. Ändern Sie in der php.ini-Datei den folgenden Eintrag von ; extension=gd zu extension=gd, d. h., wir entfernen die Auskommentierung. Den Erfolg der Maßnahme können Sie mit einem Codeschnipsel überprüfen. Nutzen Sie dazu die Funktion gd_info(). Diese Funktion liefert ein Array mit Angaben zur Version der Bibliothek ["GD Version"] und die Unterstützung für die unterschiedlichsten Grafikformarte, zum Beispiel ["JPEG Support"] oder ["PNG Support"], also:

$gd = gd_info();
echo "Version: " . $gd["GD Version"]

Im positiven Fall erhalten wir die Versionsnummer. Die Unterstützung nach den Grafikformaten fragen wir wie folgt ab:

$gd["JPEG Support"];
$gd["PNG Support"];

Ist diese Hürde genommen, können wir mit Experimenten zur Bibliothek starten.

Bilder vom Server an den Client senden

Zunächst müssen wir die grundsätzliche Vorgehensweise erklären. Mit Hilfe der Bibliothek GD wird eine Grafik neu erstellt, die zunächst lediglich im Speicher gehalten wird. Für die Anzeige im Browser muss sie an den Client übertragen werden, dazu wird die generierte Grafik als Datei auf dem Server gespeichert und die Anzeige erfolgt wie bei jeder anderen externen Datei auch mit dem <img/>-Element aus HTML heraus, oder wir übertragen die Datei direkt an den Browser, ohne sie vorher als Datei zu speichern. Wenn wir die Datei als Datei speichern, können wir mehrfach und auch zu einem späteren Zeitpunkt auf die Bilddatei zugreifen und sie wieder anzeigen. Wird nur eine einmalige Anzeige benötigt, zum Beispiel bei der Generierung eines visuellen Codes, dann genügt die Bildübertragung vom Server an den Client mit der Funktion header(). Sehen wir uns das an Beispielen an. Hierfür arbeiten wir aus Gründen der Übersicht so, dass...