Anzeige
Tutorialbeschreibung

PHP - Teil 31 - Grafikgenerierung: Rechtecke, Kreise und Ellipsen

PHP - Teil 31 - Grafikgenerierung: Rechtecke, Kreise und Ellipsen

Innerhalb dieser PHP-Reihe wurde bereits auf die Möglichkeit zur Generierung von Flash-Anwendungen hingewiesen. Genauso einfach lassen sich mittels PHP auch Grafiken erzeugen. Dabei können nicht nur neue Grafiken erstellt, sondern auch vorhandene manipuliert werden. In diesem Video-Training wird zunächst gezeigt, wie sich rechteckige Grafiken erstellen lassen. Anhand zweier weiterer Beispiele erfahrt ihr dann, welche Schritte nötig sind, um kreis- und ellipsenförmige Grafiken zu generieren. 

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Das Kernstück für die Arbeit mit Grafiken unter PHP ist die GD-Bibliothek. Über diese Bibliothek lassen sich Grafiken erstellen und manipulieren, die in einem der folgenden Formate vorliegen:

• PNG
• JPEG
• XPM
• GIF

Ob die GD-Bibliothek auf eurem System verfügbar ist, könnt ihr ganz einfach überprüfen. Lasst euch dafür die aktuelle PHP-Konfiguration über die Funktion phpinfo() anzeigen. Innerhalb der Konfigurationsübersicht gibt es den Bereich gd.

Bilder



Dort sollte bei GD Support der Wert enabled eingestellt sein.

 
Ist das nicht der Fall, muss die GD-Bibliothek über die php.ini aktiviert werden. Sucht dort nach folgender Zeile:

;extension=php_gd2.dll


Hier muss das vorangestellte Semikolon entfernt werden. Nach einem Neustart des Servers kann die GD genutzt werden.

Um eine Grafik mittels der gd-Bibliothek anzulegen, geht man üblicherweise folgendermaßen vor:

• Man erstellt die Grundform der Grafik.
• Dieser Grundform werden die Größenangaben zugewiesen.
• Es werden Farben und ggf. Schrift- und Linienarten bestimmt.
• Die Grafik wird an den Browser gesendet oder gespeichert.

Zunächst solltet ihr überprüfen, ob bei euch die GD-Bibliothek funktioniert und Bilder darüber dynamisch erzeugt werden können. Legt euch dazu eine einfache PHP-Datei an.

<?php
 header("Content-Type: image/jpeg");
 $bild = imageCreateTrueColor(100, 50);     
 imageJPEG($bild);
?>


 
Wenn ihr diese Datei im Browser aufruft, sollte sich folgendes Bild ergeben:

Bilder



Das gezeigte Beispiel ist sehr einfach gehalten und nicht wirklich praxistauglich, dennoch könnt ihr darüber die Funktionalität der GD-Bibliothek gut testen.

 
Die folgenden Beispiele sind etwas umfangreicher. Prinzipiell werden hier immer zwei Dateien benötigt:

• Eine PHP-Datei, über die die Grafiken generiert werden.
• Eine HTML-Datei, über die die Grafiken angezeigt werden.

Verzichten kann man auf die zweite Datei, wenn man direkt den Header angibt.

header('Content-Type: image/png');


Ich verwende in den folgenden Beispielen sowohl Header als auch die zweite Datei. (So lassen sich die Beispiele alleine und in Kombination mit der HTML-Datei verwenden). Verzichtet man auf den Header und ruft die PHP-Datei im Browser auf, ergibt sich folgendes Bild:

Bilder



Unschwer zu erkennen, dass das nicht die gewünschte Ausgabe ist.

 
Durch die erste richtige Anwendung wird eine rechteckige Grafik erzeugt. Ich zeige zunächst den gesamten Code, bevor dann die einzelnen Schritte bzw. Syntaxbestandteile durchgegangen werden. Die Syntax der PHP-Datei sieht folgendermaßen aus:

<?php
 header('Content-Type: image/png');
 $x = 300;
 $y = 200;
 $bild = imageCreateTrueColor($x, $y);    
 $farbe = imageColorAllocate($bild, 120, 130, 180);
 imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
 imagePng($bild);
 imageDestroy($bild);
?>


Nun zu den einzelnen Elementen dieses Skripts. Zunächst gibt man den Header an.

header('Content-Type: image/png');


Im nächsten Schritt muss eine Grafik erzeugt werden. Dabei erwartet imageCreateTrueColor() als Parameter die Größe dieser Grafik.

$bild = imageCreateTrueColor($x, $y);   


Die Grafik wird in der angegebenen Größe im Speicher generiert. Als Rückgabewert bekommt man eine Ressource, die in der Variablen $bild gespeichert wird.

Weiter geht es mit der Farbdefinition. Verwendet wird dafür imageColorAllocate().

$farbe = imageColorAllocate($bild, 120, 130, 180);


 
imageColorAllocate() erwartet als ersten Parameter eine Ressource zu einer Grafik. Über die drei weiteren Parameter wird ein Farbwert im RGB-Format angegeben.

Wer bislang noch keine Erfahrung mit der Definition solcher RGB-Farbwerte sammeln konnte, wird auf der Seite http://www.farb-tabelle.de/de/farbtabelle.htm fündig. Dort gibt es eine gute Farbtabelle, die bei der Auswahl der gewünschten Farbe hilft.

Bilder



 
Jetzt wird ein Rechteck mit der zuvor angegebenen Farbe definiert. Dazu muss der Funktion imageFilledRectangle() als erster Parameter die Bildressource zugewiesen werden. Die nächsten beiden Parameter bestimmen, wo das Bild angezeigt werden soll. Dabei wird der Anfangspunkt des Rechtecks in der linken oberen Ecke festgelegt. Die Parameter vier und fünf sind die x- und y-Werte der Endkoordinaten. Was jetzt noch fehlt, ist die Farbe, die im aktuellen Beispiel über die Variable $farbe repräsentiert wird. (Siehe dazu die Definition von imageColorAllocate()).

imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);


Im nächsten Schritt muss die generierte Grafik ausgegeben werden. Verwendet wird dafür im aktuellen Beispiel imagePng(). Diese Funktion gibt die Grafik im PNG-Format auf der Standardausgabe aus. Üblicherweise ist das der Browser. Als ersten Parameter übergibt man der Funktion imagePng() die Grafikressource. Als optionalen zweiten Parameter könnte man die Grafik und den Pfad angeben, unter dem die Grafik im Dateisystem gespeichert werden soll.

imagePng($bild);


Alternativ zu imagePng() gibt es auch imageJpeg() und imageGif(), wodurch sich GIF- und JPEG-Bilder ausgeben lassen.

imageDestroy($bild);


Zu guter Letzt gibt man den von der Grafik belegten Speicher wieder frei.

Die Grafik soll nun noch ausgegeben werden. Dazu legt man sich eine HTML-Datei an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Bild</title>
 </head>
 <body>
 <img src="rechteck.php" width="300" height="200" />
 </body>
 </html>


Entscheidend ist hier das img-Element. Dessen src-Attribut weist man als Wert den Pfad und den Dateinamen der PHP-Datei zu, in der die Grafik erzeugt wird. Im aktuellen Beispiel liegen diese Datei und die HTML-Datei im selben Verzeichnis. Wird die HTML-Datei im Browser aufgerufen, ergibt sich folgendes Bild:

Bilder



 

Ellipsen ausgeben

Will man Kreise und Ellipsen anlegen, müssen diese in rechteckige Grafiken eingebunden werden. Zunächst ein Beispiel für die Definition einer Ellipse.

<?php
 header('Content-Type: image/png');
 $x = 200;
 $y = 70;
 $bild = imageCreateTrueColor($x, $y);   
 $farbe = imageColorAllocate($bild, 120, 130, 180);
 imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
 $ellipse = imageColorAllocate($bild, 255, 255, 255);
 imageFilledEllipse($bild, 100, 30, 190, 45, $ellipse);
 imagePng($bild);
 imageDestroy($bild);
?>


Erzeugt werden Ellipsen über die Funktion imageFilledEllipse(). Diese Funktion erwartet als ersten Parameter eine Grafikressource. Über den zweiten und dritten Parameter gibt man den Mittelpunkt der Ellipse an. Dabei werden die x- und y-Koordinaten notiert, deren Ursprung in der oberen linken Ecke liegt. Die Parameter vier und fünf legen Breite und Höhe der Ellipse an. Die Farbe der Ellipse wird über den letzten Parameter definiert.

Für die Ausgabe wird auch hier wieder auf eine HTML-Datei und ein darin liegendes img-Element zurückgegriffen.

<img src="ellipse.php" width="300" height="200" />


 
Die Ausgabe im Browser sieht dann letztendlich folgendermaßen aus:

Bilder



 
Auch kreisförmige Grafiken lassen sich sehr einfach generieren. Das funktioniert prinzipiell genauso wie bei einer Ellipse. Aufgepasst werden muss lediglich beim vierten und fünften Parameter. Denn im Fall eines Kreises müssen diese beiden Parameter denselben Wert haben.

<?php
 header('Content-Type: image/png');
 $x = 200;
 $y = 200;
 $bild = imageCreateTrueColor($x, $y);    
 $farbe = imageColorAllocate($bild, 120, 130, 180);
 imageFilledRectangle($bild, 0, 0, $x, $y, $farbe);
 $ellipse = imageColorAllocate($bild, 255, 255, 255);
 imageFilledEllipse($bild, 100, 60, 80, 80, $ellipse);
 imagePng($bild);
 imageDestroy($bild);
?>


Auch hier muss die Datei natürlich wieder innerhalb eines img-Elements aufgerufen werden.

<img src="kreis.php" width="300" height="300" />


 
Ein anschließender Blick in den Browser liefert das gewünschte Ergebnis.

Bilder



So einfach lassen sich also Kreisformen in Bilder einfügen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von franzg
  • 15.05.2017 - 02:15

Vielen Dank für dieses informative Tutorial!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.10.2016 - 13:04

Danke tolles Video !

Portrait von dmtw2107
  • 16.11.2013 - 09:49

verständlich und toll erklärt danke für das tutorial

x
×
×