| Die GD-Bibliothek |
Allgemeines über PHP-Imagefunktionen
Mit den PHP-Imagefunktion lassen sich dynamisch Grafiken erzeugen.
Diese werden direkt während der Laufzeit des Skripts im Speicher des Servers angelegt und können anschließend direkt an den Browser geschickt oder auch auf dem Server gespeichert werden.
Um die Imagefunktionen nutzen zu können wird die GD-Bibliothek von Thomas Boutell (http://www.boutell.com/gd) benötigt. Sie kann als dynamisches Modul in der php.ini eingefügt werden. (Danach nicht vergessen den Server neu zu starten.)
Außerdem können mit der Freetype-Bibliothek verschiedene Schriftfonts innerhalb der Grafiken verwendet werden.
Es folgen praktische Beispiele, bei denen die Imagefunktionen von PHP eingesetzt werden. Genauere Definitionen der einzelnen Befehle gibt es unter folgendem Link:
http://www.selfphp.info/funktionsreferenz/image_funktionen/index.php
prinzipielle Arbeitsweise
<IMG SRC=“image.php?text=Hallo“>
Das sind zwei getrennte Prozesse für den Server!
- Das Interpretieren der HTML-Seite und
- das Interpretieren des image.php Skripts
Im image.php Skript darf kein HTML-Code stehen! Fehlermeldungen werden aber vom PHP in das Bild hineingeschrieben. Man kann dann das Bild aus dem Browser runterladen und im Texteditor öffnen, um die Fehlermeldung zu sehen.
Im HTTP-Header wird über den MIME-Typ die Art der Übertragung festgelegt. Das wird entsprechend in PHP für die Bilddatei benutzt:
header(„Content-type: image/jpeg“);
mögliche MIME-Types:
- image/gif
- image/jpeg
- image/png
MIME (Multipurpose Internet Mail Extension) bezeichnet die Art der Übertragung im http-Header Feld content-type. Damit der Browser die Datei richtig interpretieren kann. Form: Haupttyp/Subtyp
Muster
header(„Content-type: image/jpeg“);
Angabe das es sich bei der http-Übertragung um ein Bild handelt.
header(„Content-type: image/jpeg“, "Bild.jpg");
Alternativ wird hier das Bild auf dem Server gespeichert.
$breite = 200;
$hoehe = 200;
$img = imagecreate($breite, $hoehe);
Festlegen von Breite und Höhe des Bildes und Anlegen der Zeichenfläche.
$myColor = ImageColorAllocate($img, 255,0,255);
Festlegen von Farben. Die Farbkomponenten können wie hier Dezimal (0-255) oder Hexadezimal angegben werden (dann mit Präfix 0x, also 0x00 bis 0xFF).
Die erste Farbdefinition gilt für den Hintergrund.
Jetzt zeichnen von Rechtecken oder Text:
imagerectangle($img, x1,y1,x2,y2, $myColor);
$text = „Hallo“;
imageString($img, font, x, y ,$text, $myColor);
Die Fontangabe kann von 1-5 erfolgen, wobei 5 die größte Drastellung bedeutet. X und y sind die Koordinate, an der der Text erscheinen soll. Jetzt wird das Bild an den Browser geschickt und aus dem internen Speicher wieder gelöscht.
imagejpeg($img);
imagedestroy($img);
Beispiel 1: Bild generieren
<?
$im = ImageCreate(20,200);
$back_color = ImageColorAllocate($im,255, 255,255);
$text_color = ImageColorAllocate($im,233,14,91);
ImageStringUp($im,4,1,200, "Hallo Welt mit GD in PHP.", $text_color);
header("Content-type: image/png");
ImagePNG($im);
ImageDestroy($im);
?>
Zunächst wird mit dem Befehl ImageCreate eine Arbeitsfläche für ein neues Bild mit einer Breite von 20 und einer Höhe von 150cm erstellt. Diese Werte werden der Variable $im zugewiesen, welche für die nachfolgenden Aufrufe als Parameter zu verwenden ist. Der Ursprung des Koordinatensystems befindet sich stets in der linken oberen Ecke.
In den folgenden zwei Zeilen werden Hintergrund- und Textfarbe festgelegt. Mit dem Befehl ImageColorAllocate wird eine Farbe definiert, die für Zeichenoperationenbenutzt werden kann. Die Farbe wird im RGB-Format (Rot-, Grün-, Blauanteil jeweils zwischen 0 und 255) angegeben.
Der Befehl ImageStringUp erzeugt innerhalb des Bildbereichs einen vertikal von unten nach oben verlaufenden Text in der Schriftgröße 4 mit den Koordinaten x=1 & y=200 und der mit der Variablen $text_color definierten Farbe.
Header teilt dem Browser mit, von welchem Typ die Datei ist, die er bekommt. So kann der Browser es richtig verarbeiten. In diesem Fall ist dies eine PNG-Bilddatei. Mit ImagePNG wird das zuvor mit ImageCreate erzeugte Bild ($im) an den Browser geschickt. (An dieser Stelle hätte man z.B. auch ImageJPEG oder ImageGIF verwenden können.)
Durch Angabe eines Dateinamens als zweiten Parameter kann das Bild auch optional in eine Datei geschrieben werden (ImagePNG ($im,"image.png").
Exkurs:
Da die Fa. Unisys ein Patent auf den in GIF verwendeten Kompressionsalgorithmus LZW hatte und nicht unerhebliche Lizenzgebühren verlangte, wurde GIF aus der GD-Bibliothek herausgenommen. Ausserdem widersprach es dem Gedanken der GPL Lizenz unter der dg läuft. Seit der Version 1.8.1. wurde GIF von gd nicht mehr unterstützt. Nachdem das Patent jedoch abgelaufen ist, gibt es wieder eine GIF-Unterstützung.
Mit ImageDestroy wird auf dem Server der Speicher, der durch das Bild belegt wurde wieder freigegeben.
Das oben dargestellte Skript kann folgendermaßen in einer HTML-Datei eingesetzt werden:
....
<img src="create_image.php">
....
Der Client behandelt das dynamisch erzeugte Bild wie jedes andere vom Server geschickte Bild.
Beispiel 2: Einbau einer vorhandenen Grafik
<?
$im = ImageCreateFromJPEG("bild.jpg");
$back_color = ImageColorAllocate($im,255, 0, 0);
$text_color = ImageColorAllocate($im,255,255,255);
$farbe = ImageColorAllocate($im,255, 127, 33);
ImageString($im,5,10,10, "Wer kennt diese Person?", $text_color);
ImageFilledRectangle($im, 130, 30, 175, 45, $farbe);
Header("Content-type: image/png");
ImagePNG($im);
ImageDestroy($im);
?>
Mit ImageCreateFromJPEG erstellt man ein neues Bild, das aus einer Datei oder URL im JPEG-Format gelesen wird. Der Inhalt der gelesenen Datei wird in das neue Bild geschrieben. Es gibt ebenfalls die Funktionen ImageCreateFromGIF, ImageCreateFromPNG und ImageCreateFromWBMP für andere Ausgangsformate.
ImageString zeichnet auf der Arbeitsfläche $im einen horizontalen Textstring ("Wer kennt diese Person?") in der Größe 5 und der in der Variablen $text_color festgelegten Farbe. Die xy-Koordinaten (10, 10) geben den linken oberen Startpunkt des Strings an.
Der Befehl ImageFilledRectangle erstellt ein Rechteck mit den xy-Koordinaten 130/30 (linke obere Ecke) und 175/45 (rechte untere Ecke) in der definierten Farbe.
Beispiel 3: Verwendung von Schrift
Die GD Bibliothek bietet drei Möglichkeiten zur Verwendung von Schrift in Grafiken an:
- eingebaute Bitmap Fonts mittels ImageString - nur fünf Größen, nicht rotierbar.
- T1 Fonts mittels ImagePSText
- TrueType Fonts mittels ImageTTFText
<?
$im = ImageCreate(300 , 28);
$back_color = ImageColorAllocate($im,255, 255,255);
$text_color = imagecolorallocate($im,10,36,106);
$bar_color = ImageColorAllocate($im,18,0,255);
ImageTTFText($im, 20, 0, 10, 20, $text_color, "times.ttf", "Dynamisch erzeugter Titel);
ImageFilledRectangle($im, 0, 24, 300, 28, $bar_color);
Header("Content-type: image/png");
ImagePNG($im);
ImageDestroy($im);
?>
Mit ImageTTFText lassen sich Grafiken beschriften. Dabei wurden im obigen Beispiel folgende Werte verwendet:
ImageTTFText($im,$fontSize,$rotAngle,$x,$y,$text_color,$font,$text)
Hier: Schriftgröße: 20 Pixel, Rotierungsgrad: 0, Plazierung im xy-Koordinatensystem: 10/20, Textfarbe: Variable $text_color, Schriftart: Times (die Schriftdatei times.ttf wurde vorher auf dem Server gespeichert), Text: "Dynamisch erzeugte Überschrift".
Ein Problem bei der dynamischen Erzeugung von Bildbeschriftungen (z.B. Buttons) ist die unterschiedliche benötigte PLatzgröße je nach Textumfang, Schriftart und -größe. Mit der im nächsten Beispiel verwendeten Funktion ImageTTFBBox lässt sich zunächst die Höhe und Breite eines Textes bestimmen um diese anschließend für die ImageCreate Funktion verwenden zu können.
Beispiel 4: Button Maker
<?
// Textgröße ermitteln
$font = "times.ttf";
$fontsize = 13;
$size = ImageTTFBBox($fontsize, 0, $font, $text);
$xsize = $size[2] - $size[0] + 20; // extra Rand
$im = imagecreate($xsize, 26);
// Farben festlegen
$barUnderText = HTMLImageColorAllocate($im, 255, 0, 0);
$selectedBarUnderText = HTMLImageColorAllocate($im, 0,0,255);
$black = ImageColorAllocate($im, 0, 0, 0);
// Bild generieren
ImageTTFText($im, $fontsize, 0, 10, 20, $black, $font, $text);
ImageFilledRectangle($im, 0, 20, $xsize, 26, $barUnderText);
if($active == 1) {
// Wenn aktiv extra Balken
// 5 Pixel an beiden Rändern kleiner
ImageFilledRectangle($im, 5, 21, $xsize - 5, 22, $selectedBarUnderText);
}
// Ausgabe an Client
Header("Content-type: image/png");
ImagePNG($im);
ImageDestroy($im);
?>
Die PHP-Datei bsp4.php wird von der folgenden Seite aufgerufen:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Button Maschine</title>
</head>
<body bgcolor="#ffffff">
<form action="create_button2.php" method="get">
<p>Text: <input type="text" name="text" size="24"></p>
<p><input type="radio" name="active" value="1">Aktiv <input type="radio" name="active" value="0">Passiv</p>
<p><input type="submit" name="Abschicken" value="Button erzeugen"></p>
</form>
</body>
</html>
In dieser HTML Datei werden in einem Formular der Button-Text und die Option, ob der Button aktiv oder passiv sein soll abgefragt. Durch klicken des Submit-Buttons werden die eingegebenen Werte an die Datei bsp4.php übergegeben.
Mit der Funktion ImageTTFBBox wird ein Array von Koordinaten erzeugt, der den exakt benötigten Platz für den Text angibt. Dem errechneten x-Achsen-Wert werden 20 Pixel hinzuaddiert. Anschließend wird mit ImageCreate die Arbeitsfläche erzeugt.
Jetzt wird der Text mit der oben angegebenen TrueType-Schriftart in der angegebenen Schriftgröße generiert und anschließend ein Balken darunter gesetzt. Falls im Formular der Wert "Aktiv" gewählt wurde, wird im Anschluß mit der If-Funktion noch ein zweiter, kleinerer Balken erzeugt.
Zum Schluß wird das erzeugte Bild an den Client gesendet und anschließend aus dem Speicher gelöscht.
Beispiel 4 ausführen
Fazit
Diese Beispiele geben lediglich einen ersten Eindruck in die Möglichkeiten der GD Bibliothek. Weitere Möglichkeiten wären beispielsweise Skalierung oder Farbveränderung. Die PHP-Imagingfunktionen stellen einfache, aber wirkungsvolle Funktionen zur Verfügung, Daten - zum Beispiel aus Datenbanken - grafisch darzustellen.
Weitere möliche Anwendungsgebiete:
- Automatisch generierte Thumbnails (Vorschaubilder)
- (Aktien-)Kurse (mit Datenbank-Anbindung)
- Anpassung von hochgeladenen Bildern an das vorhandene Design der Website
- ...
Unter Mitwirkung von Florian Wendlandt (Referat im SoSe2003).