Hinweis: Diese Webseite dient als Archiv und wird nicht mehr aktualisiert. Aktuelle Artikel gibt es unter http://bwir.de

Kleine Einführung in die Grafik-Funktionen von PHP

Mit der Programmiersprache PHP lassen sich recht einfach Berechnungsergebnisse auf sehr individuelle Art in Grafiken festhalten

Von: Pascal Ströing

 

Dieser Artikel befindet sich im Archiv und wird nicht mehr aktualisiert. Informationen können ggf. veraltet, unvollständig oder fehlerhaft sein.

Der Einstieg in das Thema könnte möglicherweise etwas schwer fallen. Daher möchte ich eine knappe Anleitung dazu geben, wie man relativ einfach Grafiken, die auf eine Berechnung durch einen Programmcode basieren, erzeugen kann. Dies bietet sich überall da an, wo man Ergebnisse von Berechnungen visualisieren möchte. Natürlich bieten sich zum Erstellen von z. B. verschiedenen Diagrammen auch übliche Verarbeitungsprogramme wie beispielsweise "Microsoft Excel" an, aber zum einen ist man an die grafischen Vorlagen des Programms hinsichtlich der manchmal verräterischen Optik gebunden und zum anderen bestehen oft sehr individuelle Ansprüche einer Visualisierung, denen mit den Standartvorlagen nur unzureichend genüge getan werden kann.
Ein Beispiel für eine Anwendung findet sich in dem hier veröffentlichten Projekt Klimadiagramm im Browser mittels eines Programms in PHP erzeugen.

Die Programmiersprache PHP

PHP ist mittlerweile eine sehr bekannte und sehr beliebte Programmiersprache. Sie dient hauptsächlich als Sprache für Internetserver, um dynamische Webseiten zu gestalten. Eine Webseite ist dann dynamisch, wenn sie nicht nur aus miteinander verknüpften HTML-Seiten besteht, sondern mit einem Programmcode erzeugt wird, der die letztendlich im Browser erscheinende Seite entsprechend eines gewünschten Ergebnisses (z. B. die Textausgabe in einer bestimmten Sprache) liefert. Da PHP für eine breite Programmiererschaft konzepiert worden ist, ist die Sprache recht einfach zu handhaben; es gibt beispielsweise nicht mal die in den Hochsprachen üblichen Variabeltypen.
Fast alle angebotenen Webserver verstehen PHP. Das zu allermeist verwendete Serverprogramm Apache ist auch für jeden Heimcomputer die Grundlage, um PHP laufen zu lassen.

Die GD-Bibliothek von PHP

Die GD-Bibliothek bietet die Möglichkeit, in PHP Grafiken zu bearbeiten. Dies bedeutet, dass man sie z. B. vergrößert oder verkleinert, drehen oder auch verschieden Dinge über mathematische Wege hineinzeichnen kann; so lassen sich mit einfachen Funktionen unter der Angabe von den nötigen Koordinaten (horizontale Pixel von links, vertikale Pixel von oben) einzelne Pixel einfärben, oder auch unter weiteren Angaben Rechtecke oder Ellipsen zeichnen. Das schöne daran ist, dass man nicht malt, sondern programmiert. Lässt man die Werte für die Höhe eines Rechtecks variabel durch irgendwelche Einflüsse (die Eingabe von Daten eines Nutzers in ein Textfeld, das im Browser dargestellt wird) ermitteln, so kann man damit verschiedenste Dinge visualisieren.
Die nötige Bibliothek ist aufgrund ihrer popularität mittlerweile auch oft auf Servern installiert. Für den heimischen Apache lässt sie sich herunterladen und einfach installieren.

Ein kleines Beispiel

Eine Erläuterung folgt unter dem Quelltext.

 <?php
header("Content-type: image/png");
 
$grafik = ImageCreate (100, 100);
 
$hintergrundfarbe = ImageColorAllocate($grafik, 255, 255, 255);
 
$rechteckfarbe    = ImageColorAllocate($grafik, 255,   0,   0);
$ellipsenfarbe    = ImageColorAllocate($grafik,   0,   0, 255);
 
imagefilledrectangle($grafik,10,10,60,60,$rechteckfarbe);
 
$ellipsenbreite = 6*10;
 
imageellipse($grafik,60,65,$ellipsenbreite,35,$ellipsenfarbe);
 
ImagePNG($grafik);
imagedestroy($grafik);
?>

Erläuterung:

1. Der header mit den hier angegebenen Parametern sort dafür, dass als Ergebnis dieses Scripts eine PNG-Datei erzeugt wird. So erscheint beim Aufruf dieser Datei im Browser eine Grafikdatei, die angezeigt wird. Alternativ dazu könnte man auch ohne header direkt in der Datei, die die Grafik erzeugt, arbeiten und die Grafik beispielsweise in einer Datei "Grafik.png" speichern. Wie das geht, klärt sich hier im weiteren Verlauf.

2. Mit ImageCreate wird ein noch leeres Bild erzeugt. Die beiden Parameter in der Klammer geben die Breite und die Höhe des Bildes in Pixel an. Dem erzeugten Bild wird ein Variablenname zugewiesen, da man bei jedem späteren Bearbeiten (z. B. ein Objekt hineinzeichnen) angeben muss, mit welchem Bild das denn geschehen soll. Dies wird deshalb so gehandhabt, da man innerhalb eines Scripts auch mehrere Bild parallel erzeugen kann.

3. Mit ImageColorAllocate legt man Farben fest. Der erste Parameter ist immer die Variable für die Grafik, für die man die Farbe verwenden will. Hier ist der etwas wenig logische Sonderfall augenscheinlich, der besagt, dass jeweils die erste definierte Farbe für eine Grafik gleichzeitig die Hintergrundfarbe der Grafik bildet. Hier wird die in der Variablen $hintergrundfarbe gespeicherten Farbe nicht mehr verwendet. Sie wird lediglich definiert, um so eine Hintergrundfarbe zu geben. Die weiteren drei Parameter innerhalb der Klammern bilden den Rot-, Grün- und Blauanteil (in Werten von 0 bis 255). Die Hintergrundfarbe hier ist weiß, da die Maximalwerte aller Farbanteile in diesem System weiß ergeben.

Die Grafik im jetzigen Stadium

Die Grafik im jetzigen Stadium

4. Zwei weitere Farben werden mit ImageColorAllocate definiert. In der Variable $rechteckfarbe liegt rot, in $ellipsenfarbe blau.

5. Durch imagefilledrectangle wird ein mit der Farbe in $rechteckfarbe gefülltes Rechteck in der Grafik mit dem Variablennamen $grafik erzeugt. Die vier weiteren Parameter bestimmen die Lage der oberen, linken Ecke (hier bei 10 Pixel links vom linken Rand des Bildes und 10 Pixel unterhalb der Oberkante des Bildes) auf dem Bild und der unteren, rechten Ecke (hier bei 100 Pixel links vom linken Rand des Bildes und 100 Pixel unterhalb der Oberkante des Bildes) im Bild. Das Rechteck ist also 60 mal 60 Pixel groß.

Die Grafik im jetzigen Stadium

Die Grafik im jetzigen Stadium

6. Anhand der Variable $ellipsenbreite möchte ich verdeutlichen, dass die für das Erzeugen von zweidimensionalen Objekten in der Grafik verwendeten Parameter auch vorher auf verschiedenste Art mathematisch ermittelt werden können. Freilich ist 6*10 keine Rechnung, bei der sich die Einfuhr einer zusätzlichen Variable lohnt, aber bei komplizierteren Rechnungen oder wirklich variierenden Variablen sieht das schon anders aus. Zum Beispiel sind die Höhen der Säulen der Niederschlagsbalken in der hier vorher bereits präsentierten Klimadiagrammanwendung von den Eingaben abhängig, die der Nutzer dazu gemacht hat.

7. Durch imageellipse erzeugt man eine Ellipse, die nicht mit einer Farbe gefüllt ist, sondern nur durch einen ein Pixel breiten Rand erscheint. Hier befindet sich das Zentrum dieser Ellipse 60 Pixel rechts vom linken Rand und 65 Pixel unterhalb der Oberkante des Bildes. Sie ist so breit, wie es der in $ellipsenbreite gespeicherte Wert (nämlich das Ergebnis aus 6*10) vorgibt und 35 Pixel hoch. Dargestellt wird sie in der Farbe, die in $ellipsenfarbe gespeichert ist.

Die Grafik im jetzigen Stadium

Die Grafik im jetzigen Stadium

8. Letzlich muss noch mit ImagePNG der Befehl zur Ausgabe der Datei an den Browser gegeben werden.

9.imagedestroy löscht man das Bild aus dem Speicher des Rechners. Dies ist nicht zwingend notwendig, dient aber der Sauberkeit des Speichers und auch der Performanz des Rechners.

Eine Liste aller Funktionen der GD-Bibliothek: http://de2.php.net/image. (Leider ist die Liste nur teilweise in das Deutsche übersetzt.)

9 Kommentare RSS Feed

Webagentur am 20.08.2008 um 11:45 Uhr E-Mail-Adresse

Das Tutorial finde ich echt klasse und super gut erklärt. Danke!

Benedikt Wirmer am 03.05.2008 um 10:13 Uhr E-Mail-Adresse

Sieht ganz so aus, als wir die Zeile
header("Content-type: image/png"); nicht ausgeführt. Hast du sie evtl. vergessen oder findet vorher schon eine Ausgabe (echo o.ä.) statt? Header-Befehle können nämlich nur ausgeführt werden, wenn vorher noch nichts anderes ausgegeben wurde.

adis am 03.05.2008 um 02:30 Uhr E-Mail-Adresse

Ich habe PHP unter iis 5.1 windows zu laufen.
Egal welches Beispiel ich ausprobiert habe, es kommt nur irgendwelcher Kauderwelch bei raus.
so was:
‰PNG  IHDRdd Ś}Ç PLTE˙˙˙˙˙·—í·IDATxśíÓA ƒ0Đ!P9…Ëâ)Ľ„B»ďBOá%˛ĎF(9eƒVňgŚmé˘P™Y^~fH+Ő©…jTTT(×ďE¦¶1± ƒźO‹éüłOŇŻ8!sd™-péóԎ‹‡űŚ(Ţ´Bą X”ŠAńěÝĆ7‚ůµŞOÄr±ż—o¦Ć[‹Őľ`žźmwl;ŕEÓsţt Č䍁K‰„d„¨^(n QÚmJ:đNë/ë ¨ě‘P?-IEND®B`‚

Was ist den falsch an meiner PHP Konfiguration.

Würde mich freuen wenn du mir weiterhelfen könntest.

Anonymer Benutzer am 05.05.2007 um 19:28 Uhr

Danke!!!

So etwas in der Art habe ich gesucht!:)

Benedikt Wirmer am 10.09.2006 um 15:34 Uhr E-Mail-Adresse

Ja, für Teilkreise kann man die Funktion http://de.php.net/manual/de/function.imagearc.php verwenden. Allerdings gibt es auch viele bereits vorgefertigte Klassen für Diagramme, die die gewünschten Funktionen bereits bereitstellen.

Alle Kommentare lesen

Kommentar verfassen

Name:
E-Mail:
Optional - wird vor Spam geschützt
Kommentar:
HTML-Code ist nicht möglich
Tipp: Abonnieren Sie diese Kommentare als RSS-Feed, um über neue Einträge auf dem Laufenden zu sein.