Gliederung:
Allgemeines über
PHP-Imagefunktionen
• |
Mit den PHP-Imagefunktion lassen sich
dynamisch erzeugte Grafiken erzeugen. |
• |
Diese werden nicht statisch (z.B. mit einem
Grafikprogramm) erzeugt, sondern direkt während der Laufzeit des
Skripts erzeugt. Die Bilder werden zunächst im Speicher des Servers
erzeugt und können anschließend direkt an den Browser geschickt oder
auch auf dem Server gespeichert werden. |
• |
Wegen den Lizenzproblemen für das GIF-Format wird ab der
Version 1.6 statt dessen das PNG-Format unterstützt. Weitere unterstützte
Grafik-Formate: JPEG, WBMP |
• |
Außerdem können mit der Freetype-Bibliothek dynamisch
erzeugte Textelemente innerhalb der Grafiken erzeugt werden. |
Beispielskript 1: Bild generieren
create_image.php
<?
$im = ImageCreate(20,150);
$back_color = ImageColorAllocate($im,255, 255,255);
$text_color = ImageColorAllocate($im,233,14,91);
ImageStringUp($im,1,1,125, "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 der Breite 20 und der Höhe 150 erstellt. Diese Werte
werden der Variable $im zugewiesen, welche für die nachfolgenden Aufrufen als
Parameter zu verwenden ist. Der Ursprung des Koordinatensystems befindet sich in
der linken oberen Ecke.
In den folgenden zwei Zeilen werden Hintergrund- und Textfarbe
festgelegt. Mit dem Befehl ImageColorAllocate kann man die Farben
anlegen, die für Zeichenoperationenbenutzt werden soll. Die Farbe wird als RGB
(rot, grün, blau) angegeben.
Der Befehl ImageStringUp erzeugt innerhalb des
Bildbereichs einen vertikal von unten nach oben verlaufenden Text in der
Schriftgröße 1 mit den Koordinaten x=1 & y=125 und der mit der Variablen $text_color
definierten Farbe.
Der Befehl Header teilt dem Client mit, was für eine
Datei er bekommt. In diesem Fall ist dies eine PNG-Bilddatei. Mit ImagePNG
wird das zuvor mit ImageCreate erzeugte Bild ($im) an den Client 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").
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 auf dem Server vorhandene Bild.
Beispielskript 2: Einbau einer
vorhandenen Grafik
create_image2.php
<?
$im = ImageCreateFromJPEG("bild.jpg");
$back_color = ImageColorAllocate($im,255, 255,255);
$text_color = ImageColorAllocate($im,233,14,91);
$schwarz = ImageColorAllocate($im,0,0,0);
ImageString($im,5,10,10, "Wer kennt diese Person?", $text_color);
ImageFilledRectangle($im, 65, 125, 175, 150, $schwarz);
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 65/125 (linke obere Ecke) und 175/150 (rechte untere Ecke) in
der definierten Farbe.
Beispielskript 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 |
create_image3.php
<?
$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, "tahoma.ttf",
"Dynamisch erzeugte Überschrift");
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:
Allgemein:
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: Tahoma
(die Schriftdatei tahoma.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.
Beispielskript 4: Button Maker
create_button2.php
<?
// HTML Farben umwandeln
function HTMLImageColorAllocate($im, $hexstring) {
ereg( "([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})", $hexstring, $cols );
$red = hexdec($cols["1"]);
$green = hexdec($cols["2"]);
$blue = hexdec($cols["3"]);
return ImageColorAllocate($im, $red, $green, $blue);
}
// HTML Umlaute ersetzen
$text = str_replace("ä", "ä", $text);
$text = str_replace("Ä", "Ä", $text);
$text = str_replace("ö", "ö", $text);
$text = str_replace("Ö", "Ö", $text);
$text = str_replace("ü", "ü", $text);
$text = str_replace("Ü", "Ü", $text);
$text = str_replace("ß", "ß", $text);
$barCol = urldecode($barCol);
$barHighCol = urldecode($barHighCol);
// Textgröße ermitteln
$font = "tahoma.ttf";
$fontsize = 13;
$size = ImageTTFBBox($fontsize, 0, $font, $text);
$xsize = $size[2] - $size[0] + 20; // extra Rand
$im = imagecreate($xsize, 26);
// Farben festlegen
$white = ImageColorAllocate($im, 255, 255, 255);
$barUnderText = HTMLImageColorAllocate($im, $barCol);
$selectedBarUnderText = HTMLImageColorAllocate($im, $barHighCol);
$black = ImageColorAllocate($im, 0, 0, 0);
// Bild generieren
ImageTTFText($im, $fontsize, 0, 0, 10, $black, $font, $text);
ImageFilledRectangle($im, 0, 20, $xsize, 26, $barUnderText);
if($active == 1) {
// Wenn aktiv extra Balken
// 20 Pixel kleiner
ImageFilledRectangle($im, 0, 15, $xsize - 20, 19, $selectedBarUnderText);
}
// Ausgabe an Client
Header("Content-type: image/png");
ImagePNG($im);
ImageDestroy($im);
?>
Die PHP-Datei create_button2.php wird von der folgenden
Seite buttonmaker.html aufgerufen:
buttonmaker.html
<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>Farbe: <input type="text" name="barCol" size="7"
maxlength="7"></p>
<p>Farbe Highlight: <input type="text" name="barHighCol"
size="7"maxlength="7"></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, die Farben der Balken und die Option, ob der Button aktiv oder
passiv sein soll abgefragt. Durch klicken des Submit-Buttons werden die
eingegebenen Werte an die Datei create_button2.php übergegeben.
Im dem Skript werden zunächst eventuell in der $text-Variablen
vorhandene Umlaute ersetzt (str_replace). Anschließend werden mit dem Befehl urldecode
die übermittelten Farbwerte ausgelesen.
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.
Die Funktion HTMLImageColorAllocate wandelt die HTML
Farben in RGB-Werte um. Diese werden den Variablen $barUnderText und $selectedBarUnderText
zugewiesen.
Jetzt wird der Text mit der oben angegebenen TrueType-Schriftart
ind 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.
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 grafisch darzustellen.