brain-and-trust

PHP - Tutorials

PHP - Einführung

Sitemap

Kontakt

Impressum

LOG IN

LOG OUT


HOME > PHP - Tutorials > Erstellen von Grafiken mit PHP - Grundlagen >


Grundlagen: Erstellen von Grafiken mit PHP

Sie können mit PHP Grafiken erstellen oder vorhandene Grafiken manipulieren. In diesem Tutorial werden die grundlegenden Funktionen und Vorgehensweisen am Beispiel eines kleinen Kunstwerks gezeigt.

Die hier vorgestellten Befehle setzen die GD-Extension voraus. Lesen Sie das Tutorial zur Installation, um die GD-Extension zu aktivieren. Die meisten Provider haben diese Erweiterung aktiviert.

INHALT

    Grundlagen
    Welche Grafikformate werden unterstützt
    Wie erstellt man mit PHP Grafiken
    Erstellen der Grafik
    Erläuterung des Scripts

Grundlagen

Aufgrund der Konventionen des HTTP-Protocols sendet der Browser die Anfrage nach einer Datei zunächst einfach an den Server und wartet dann auf eine Antwort. Hierbei ist es egal, ob es sich um eine Word-, HTML-, Grafik- oder PHP-Datei handelt. Nach der Anfrage lauscht der Browser auf die Antwort des Servers. In dieser Antwort teilt der Server dem Browser im Header mit, welchen Dateityp er senden wird. Setzen Sie nun mit PHP die Header-Information derart, dass angezeigt wird, dass eine Grafikdatei kommen wird, so ist dem Browser die Dateiendung egal und er verarbeitet jede Datei wie eine Grafik.

Welche Grafikformate werden unterstützt

Auch wenn es ab Version 4 von PHP einen Befehl gibt, der Ihnen die unterstützten Grafikformate ausgibt, ist es am sichersten, die alt bewährte Try and Error- Methode zu verwenden.

Zu diesem Zweck erstellen Sie eine ganz einfache Grafik und geben Sie in den unterschiedlichen Formaten aus. Wenn die Grafik angezeigt wird, haben Sie ein unterstütztes Format entdeckt, ansonsten haben Sie Pech gehabt. Einige Provider lassen bei nicht unterstützten Grafikformaten freundlicherweise eine Fehlermeldung ausgeben.

Das Script zum Testen der Grafikformate ist ganz schnell geschrieben. Speichern Sie dieses Script in eine PHP-Datei und rufen Sie es mit den unterschiedlichen Header-Informationen und den darauffolgendem Befehl für die unterschiedlichen Formate auf. Im nachfolgenden Script sind alle benötigten Befehle enthalten. Sie müssen nur die auskommentierten Zeilen wechseln. Wenn das Grafikformat nicht unterstützt wird, erhalten Sie eine Warnmeldung, ansonsten wird ein blaues Rechteck angezeigt.

<?php
$image = imagecreate(300,150);
$farbe_body = imagecolorallocate($image,0,255,255);
header("Content-Type: image/gif");
imagegif($image);
//header("Content-Type: image/png");
//imagepng($image);
//header("Content-Type: image/jpeg");
//imagejpeg($image,"",1);
//header("Content-Type: image/vnd.wap.wbmp");
//imagewbmp($image);
?>


Hinweis

Sollten Sie eine Meldung erhalten, dass Ihr Rechner die Datei speichern möchte, kennt Ihr Browser das Dateiformat nicht als Grafik. Dies heißt nicht unbedingt, dass die PHP-Version das Dateiformat nicht unterstützt.

Wie erstellt man mit PHP Grafiken

In PHP stehen Ihnen eine ganze Reihe von Befehlen zur Verfügung, mit denen Sie Grafiken erstellen und bearbeiten können. Im Prinzip kann man den Umgang mit Grafiken in drei Schritte unterteilen:

    Erstellen des Rohbildes mit imagecreate(). Als Argumente werden die Höhe und Breite des Bildes in Pixeln übergeben. Sie können auch mit einer fertigen Grafikdatei beginnen, die Sie dann als Basis verwenden. Je nach Grafikformat benötigen Sie hierzu einen etwas anderslautenden Befehl: imagecreatefromwbmp(), imagecreatefrompng(), imagecreatefromjpeg(), imagecreatefromgif(). Diese Befehle erwarten jeweils den Pfad zur Datei.
    Füllen bzw. Zeichnen des Bildes mit verschiedenen Elementen. Sie können die Hintergrundfarbe bestimmen, Kreise, Rechtecke, einzelne Pixel und andere geometrische Figuren zeichnen oder auch vorhandene Grafiken einfügen. Auch Text können Sie auf die Grafik schreiben.
    Senden des Bildes an den Browser oder Speichern des Bildes in eine Datei.

Sie haben die Wahl zwischen mehreren Grafikformaten, wobei das sehr beliebte GIF-Format bei einigen Providern (abhängig von der Version der GD-Bibliothek) aus rechtlichen Gründen nicht mehr unterstützt wird, während ältere Versionen von PHP noch nicht alle Formate unterstützen.

Erstellen der Grafik

Um den Umgang mit Grafiken zu demonstrieren, entwerfen wir ein modernes "Kunstwerk" bestehend aus zwei Linien, einem Rechteck und einem Polygon. Sie finden am Ende des gelisteten Scripts die Befehle, um das Bild in den unterschiedlichen Formaten auszugeben. Sie können das Script entsprechend Ihres Bildformats leicht anpassen, indem Sie die Kommentierung der benötigten Zeilen entfernen und umgekehrt vor dem JPG-Format, das wir hier verwenden, Kommentierungszeichen einfügen. Sie sehen das Bild, wenn Sie dieses Script direkt im Browser aufrufen.


Hinweis

Das Bild wird nur im Browser angezeigt, wenn die Zeilen für den Header am Ende des Scripts und der folgende Befehl zum Senden des Bildes (z.B. imagejpeg($image,"",100)) im Script enthalten sind. Bedenken Sie dies, wenn Sie zwischendurch einen Kontrollblick auf das Bild werfen möchten.

Hier gehts zum Kunstwerk

<?php
$image = imagecreate(400,300);
$farbe_body = imagecolorallocate($image,200,200,200);
$Schwarz = imagecolorallocate($image,0,0,0);
$weis = imagecolorallocate($image,255,255,255);
$red = imagecolorallocate($image,255,0,0);
$blau = imagecolorallocate($image,100,100,255);
imagefill($image, 0, 0, $farbe_body);
imageline($image, 300, 0, 300, 300, $red);
imageline($image, 300, 150, 400, 150, $red);
imagefilledrectangle($image, 50, 50, 250, 250, $weis);
//1.Punkt
$punkte[] = 0;
$punkte[] = 0;
//2.Punkt
$punkte[] = 50;
$punkte[] = 20;
//3.Punkt
$punkte[] = 100;
$punkte[] = 100;
//4.Punkt
$punkte[] = 250;
$punkte[] = 120;
//5.Punkt
$punkte[] = 400;
$punkte[] = 270;
//6.Punkt
$punkte[] = 400;
$punkte[] = 273;
//7.Punkt
$punkte[] = 250;
$punkte[] = 150;
//8.Punkt
$punkte[] = 100;
$punkte[] = 130;
//9.Punkt
$punkte[] = 50;
$punkte[] = 23;
//10.Punkt
$punkte[]= 0;
$punkte[]= 3;
imagefilledpolygon ($image, $punkte, count($punkte)/2, $red);
//header("Content-Type: image/gif");
//imagegif($image);
//header("Content-Type: image/png");
//imagepng($image);
header("Content-Type: image/jpeg");
imagejpeg($image,"",100);
imagedestroy($image);
?>

Erläuterung des Scripts

Zunächst weisen Sie PHP an, eine Rohgrafik zu erstellen, die Sie anschließend bearbeiten und mit Elementen füllen können. Beachten Sie: Diese Rohgrafik existiert nur im Arbeitsspeicher des Rechners. Sie müssen zum Anzeigen oder Speichern der Grafik diese Aktionen explizit angeben.
Als Argumente erwartet der Befehl imagecreate() die Breite und Höhe der Grafik in Pixeln. Der Befehl gibt den Handle auf die Grafik zurück. Diesen Handle müssen Sie in den Befehlen zum Bearbeiten und Zeichnen der Grafik immer mit angeben, damit PHP weiß, welche Grafik bearbeitet werden soll.

$image = imagecreate(400,300);

Bevor Sie ein bisschen zeichnen können, müssen Sie bestimmen, welche Farben Sie verwenden möchten. Sie müssen nicht alle Farben in einem Block definieren, sondern können die Definition auch kurz vor dem Einsatz der Farbe vornehmen.
Im Moment ist es so, dass PHP die zuerst definierte Farbe automatisch für den Hintergrund der Grafik verwendet. Im Beispiel gehen wir aber auf Nummer Sicher und füllen die Grafik sicherheitshalber nochmals mit der Farbe - wer weiß, ob zukünftige Versionen dieses Verfahren beibehalten.
Die Definition der Farben erfolgt mit dem Befehl imagecolorallocate(). Dieser Befehl gibt einen Handle auf die Farbe zurück, den Sie einer Variablen zuweisen, um die Farbe beim Zeichnen einzusetzen. Der Befehl erwartet folgende Argumente:

    Den mit imagecreate() erzeugten Handle auf die Grafik, für die die Farbe gesetzt werden soll.
    Die Angabe der Farbe. Der Farbwert wird über die RGB-Farbangabe in den drei Argumenten gesetzt.

$farbe_body = imagecolorallocate($image,200,200,200);
$schwarz = imagecolorallocate($image,0,0,0);
$weis = imagecolorallocate($image,255,255,255);
$red = imagecolorallocate($image,255,0,0);
$blau = imagecolorallocate($image,100,100,255);

Wie oben bereits erwähnt, füllen wir den Hintergrund des Bildes aus Sicherheitsgründen mit der gewünschten Farbe. Der Befehl imagefill() arbeitet übrigens ähnlich wie die Flutfüllungen in Grafikprogrammen. Er füllt eine Fläche um einen angegebenen Punkt mit der angegebenen Farbe. Die Füllung wird soweit ausgedehnt, bis diese durch andersfarbige Pixel vollständig begrenzt wird. Da bisher noch keine Elemente gezeichnet sind, die eine Fläche abgrenzen können, füllt der Befehl den gesamten Hintergrund.
Der Befehl erwartet als Argumente: das Handle auf die Grafik, den Startpunkt der Füllung, angegeben durch zwei Werte - X- und Y-Koordinate - und den Handle auf die zu verwendende Farbe.

Vorsicht: Die Koordinatenangaben sind bei PHP-Grafiken etwas gewöhnungsbedürftig, da - anders als man das aus der Schule bei einem Koordinatenkreuz kennt -, der Nullpunkt (0,0) in der linken oberen Ecke der Grafik angeordnet ist. Die X-Werte werden Pixel für Pixel horizontal nach rechts hochgezählt und die Y-Werte vertikal nach unten.

imagefill($image, 0, 0, $farbe_body);

Jetzt wird das erste einfache Element auf die Rohgrafik gezaubert: Eine vertikale Linie von 300,0 nach 300,300, wobei der erste Wert der Tupel (Wertepärchen) die X-Koordinate und der zweite die Y-Koordinate angeben. Als weitere Argumente benötigt der Befehl imageline() das Handle auf die Grafik und auf die Farbe.

imageline($image, 300, 0, 300, 300, $red);

Der Trend geht zur "Zweitlinie"; also zeichnen wir schnell noch eine weitere Linie von 300,150 nach 400,150.

imageline($image, 300, 150, 400, 150, $red);

Jetzt erstellen wir ein gefülltes Rechteck. Mit dem Befehl imagefillrectangle() wird das Rechteck über die Koordinaten des linken oberen (50,50) und des rechten unteren (250,250) Punkts bestimmt. Wie gehabt benötigt auch dieser Befehl das Handle auf die Grafik und die Farbe.

imagefilledrectangle($image, 50, 50, 250, 250, $weis);

Das komisch geformte, zackige Etwas auf der Grafik haben wir mit dem Befehl imagefilledpolygon() erstellt. Mit diesem Befehl zeichnen Sie beliebig gefüllte Vielecke auf das Bild. Neben den üblichen Argumenten, das Handle auf die Grafik und die Farbe, erwartet dieser Befehl als Besonderheit ein Array mit den Koordinaten und die Anzahl der Punkte.
Die X- und Y-Werte der Koordinaten je Punkt werden getrennt jeweils in aufeinander folgenden Arrayelementen gespeichert. Entsprechend berechnet sich die Anzahl der Punkte, indem man die Anzahl der Arrayelemente durch zwei teilt, da je Punkt zwei Elemente benötigt werden.

//1.Punkt
$punkte[]=0;
$punkte[]=0;
//2.Punkt
$punkte[]=50;
$punkte[]=20;
//3.Punkt
$punkte[]=100;
$punkte[]=100;
//4.Punkt
$punkte[]=250;
$punkte[]=120;
//5.Punkt
$punkte[]=400;
$punkte[]=270;
//6.Punkt
$punkte[]=400;
$punkte[]=273;
//7.Punkt
$punkte[]=250;
$punkte[]=150;
//8.Punkt
$punkte[]=100;
$punkte[]=130;
//9.Punkt
$punkte[]=50;
$punkte[]=23;
//10.Punkt
$punkte[]=0;
$punkte[]=3;
imagefilledpolygon($image, $punkte, count($punkte)/2, $red);

Soweit ist das Bild im Speicher fertig gestellt. Jetzt müssen/können Sie das Bild als Datei speichern oder an den Browser ausgeben. Wenn Sie das Bild an den Browser schicken, müssen Sie zunächst die Header-Information setzen.

Beachten Sie, dass bei der Ausgabe an den Browser nur Bilddaten gesendet werden dürfen. Sie dürfen keine Textausgaben oder Leerstellen oder Leerzeilen im Script ausgeben, dies würde den Browser überfordern.


Hinweis

Sie können das Bild auch mehrmals ausgeben, solange Sie es nicht im Speicher gelöscht haben. Allerdings können Sie nur ein Bild an den Browser senden; alternativ speichern Sie es z.B. zunächst als Datei im GIF- und anschließend im PNG- Format, senden es dann im JPG-Format an den Browser und speichern es abschließend noch im JPG-Format. Sie haben dann drei Dateien erstellt.


Wenn Sie das Bild speichern möchten, geben Sie als weiteres Argument den Dateinamen in dem Befehl zum Erstellen des Bildes an (imagegif($image, 'testbild.gif')). In diesem Fall können Sie auf die Header-Information verzichten. Eine besondere Stellung nimmt hier übrigens das JPG-Format ein. Es erlaubt drei Argumente; mit dem dritten optionalen Argument geben Sie die Qualität des Bildes mit Hilfe eines Wertes von 0 bis 100 an (0 schlecht bis 100 gut). Möchten Sie diesen Wert bei der Ausgabe an den Browser definieren, müssen Sie für das zweite Argument - den Dateinamen - eine leere Zeichenkette - also "" - setzen.

//header("Content-Type: image/gif");
//imagegif($image);
//header("Content-Type: image/png");
//imagepng($image);
header("Content-Type: image/jpeg");
imagejpeg($image,"",100);

Wenn das Bild im Arbeitsspeicher nicht mehr benötigt wird, können Sie den Speicher freigeben mit:

imagedestroy($image);


Hinweis

Wenn Sie Koordinaten angeben, die außerhalb des erzeugten Bildes liegen, ist PHP sehr sensibel. Es wird nicht einmal eine Fehlermeldung ausgegeben. Sie erhalten nur einen allgemeinen HTTP-Fehler.


© Copyright 2005 by Christine Peyton , Andre Möller


Buch Magnum
 
 
Buch Delfine

Ein paar Links:

Ihr Link hier?