Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln! Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:

Navigation:

Besucherzähler:

  • Derzeit online: 5
  • Insgesamt: 47457

Spamfresser:

  • Spams: 11679

GD-Library oder Grafiken mit PHP (1/3)

Kategorie PHP & MySQL

Datum: 12.11.2007, 16:37 - Autor: Manko10

Hallo,

hiermit beginne ich eine kleine Serie von Tutorials. Als erstes werde ich etwas über die GD-Library, oder auch kurz: GD, schreiben. Zumindest mir ging es so, dass es immer ein Thema war, über dass ich immer eher schlecht als recht Bescheid wusste, zumal die Funktionsnamen (zunächst mal) nicht so eingängig klangen, wie der Rest der Sprache und außerdem braucht man GD auch nicht allzu häufig. Also war GD nie ein großes Thema. Jedoch begann es mich dann doch zu interessieren. Außerdem ist GD mitterweile kein unwichtiges Thema mehr. Es ist zwar nicht die Technologie, die man immer braucht, aber es ist gut, darüber Bescheid zu wissen. Und nun schreibe ich dieses Tutorial.
Enjoy it! ;)


1. Was brauche ich?

Um mit der GD-Lib programmieren zu können, braucht man außer der PHP-Grundausstattung (wer hätte das gedacht) nur noch die installiert GD-Lib. Das ist meistens der Fall und unter XAMPP (ApacheFriends.org) sowieso.
Um zu prüfen, ob dies gegeben ist, kann man einen Blick in die php_info() werfen oder es sich einfacher machen und schnell mal
PHP-Code:
1:
2:
3:
<?php
var_dump(gd_info());
?>

in ein PHP-Skript schreiben. Wenn ein Fehler auftritt (was sehr unwahrscheinlich ist), dann stimmt mit der GD-Installation etwas nicht. Ansonsten sollte das etwa wie bei mir aussehen:
Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
array
  'GD Version' => string 'bundled (2.0.34 compatible)' (length=27)
  'FreeType Support' => boolean true
  'FreeType Linkage' => string 'with freetype' (length=13)
  'T1Lib Support' => boolean true
  'GIF Read Support' => boolean true
  'GIF Create Support' => boolean true
  'JPG Support' => boolean true
  'PNG Support' => boolean true
  'WBMP Support' => boolean true
  'XPM Support' => boolean false
  'XBM Support' => boolean true
  'JIS-mapped Japanese Font Support' => boolean false

Wichtig ist vor allem die Zeile, in der die GD-Version steht. Um alle Beispiele dieses Tutorials ausführen zu können, sollte sie mindestens 1.6 sein.


2. Los geht's: unser erstes Hallo-Welt-GD

Ein Maler ohne Papier ist wie ein Fisch ohne Wasser und ein GD-Programmierer ohne Bildfläche schaut ähnlich dumm aus der Wäsche, also erstellen wir zuerst eine Bildfläche. Das tun wir mit
PHP-Code:
1:
2:
3:
4:
<?php
header("Content-Type: image/png");
$img = imagecreatetruecolor(300, 300);
?>

Der erste Befehl legt zunächst mal fest, dass es sich hier um eine PNG-Grafik handelt. Auf die Grafik selbst hat es keine Auswirkungen, es bewirkt aber, dass der Browser die Ausgabe hinterher eindeutig als Grafik identifizieren kann. Diese Angabe muss nicht zwingend sein, man sollte es der Kompatibilität und des guten Programmierergewissens zuliebe aber doch hinschreiben.
Der zweite Befehl ist schon interessanter. Er legt eine neue Bildfläche an, die dezeit noch ziemlich schwarz ist, weil noch nichts drauf ist. Der erste Parameter gibt dabei die Breite und der zweite Parameter die Höhe der Bildfläche an. In $img ist jetzt die Bildressource gespeichert. Über diese Variable sprechen wir hinterher dieses Bild an.

HINWEIS:

Zum Erstellen einer Bildfläche gibt es auch noch den Befehl imagecreate(). Dieser erzeugt im Gegensatz zu imagecreatetruecolor() eine wirklich leere Bildfläche (die von imagecreatetruecolor() ist wenigstens noch schwarz). Da es damit allerdings nur Probleme gibt, sind PHP.net und ich uns einig, lieber imagecreatetruecolor() zu verwenden.


Nun ist auf dieser Bildfläche außer Schwarz noch nichts drauf, was sich jetzt aber ändern soll. Schreiben wir also einen Text hinein, der die Farbe Weiß haben soll. Also muss sowohl der Text geschrieben als auch die Farbe festgelegt werden:
PHP-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
<?php
header("Content-Type: image/png");
$img = imagecreatetruecolor(300, 300);

$white = imagecolorallocate($img, 255, 255, 255);
imagestring($img, 5, 103, 140, "Hallo Welt!", $white);

imagepng($img);
?>

Der ersten beiden Befehle kennen wir schon. Bleiben noch drei weitere. Mit dem ersten wird ein Verweis auf eine Farbe erstellt. Hierbei wird sowohl die Bildfläche als auch der Farbwert als RGB (Red-Green-Blue) angegeben.
Danach wird der Text mit imagestring() geschrieben. Der erste Parameter ist wieder die Bildfläche. Darauf folgt die Schriftgröße (erlaubt sind Werte von 1-5 - größere oder kleinere werden wie 5 bzw. 1 behandelt), gefolgt von den X- und Y-Koordinaten des ersten Buchstabens wobei die obere linke Bildecke die Koordinaten (0, 0) hat.
Schließlich kommt noch der Text selbst gefolgt von der Farbe, die vorher definiert wurde.

Der letzte Befehl bewerkstelligt noch die Ausgabe des fertigen Bildes. Da wir uns zu Anfang für eine PNG-Grafik entschieden haben, steht hier imagepng(). Alternativ kann auch imagejpeg() für JPEGs oder imagegif() für GIFs verwendet werden. Achte aber darauf, dann auch den Header-Befehl entsprechend zu ändern.


3. Fertig, und nun?

So, das wäre unser erstes GD-Skript. Was fehlt noch? Achja, das Testen des Meisterwerks. Dazu speichere das Skript in einer PHP-Datei im Freigabeverzeichnis deines Servers. Ich benutze hier den Namen gd1.php.
Danach erstelle noch eine schlichte HTML-Datei, die folgenden Code enthält:
Code:
1:
<img src="test.php" alt="Grafik" />

Um dein Skript nun zu testen, rufst du die HTML-Datei über den Webserver auf. Zu sehen ist eine schwarze Grafik, in deren Mitte ein weißes "Hallo Welt!" prangt.

http://www.openwebboard.org/tut_img/gdlib_01.png


Herzlichen Glückwunsch!

Seiten: (1/3) 1 2 3 »

War dieses Tutorial hilfreich?

4 Kommentare:

Datum: 05.12.2008, 09:31 - Autor: Gast

Ein erster (sehr kleiner) Schritt sehr verständlich erklärt.

Datum: 05.12.2008, 12:40 - Autor: Manko10

Hallo und schön, dass es dir gefällt.
Wenn ich mal dazu komme, soll es auch noch weitere Teile geben, die etwas weiterführen, aber die sind derzeit leider noch nicht sin Sicht. :)

Datum: 06.01.2009, 14:32 - Autor: Gast

Das Script ist ja voll cool !

Echt toll .

DANKE

mfg Chris

Datum: 09.03.2010, 11:00 - Autor: enOr

Sehr schöner Einstieg in die GD lib. Damit habe selbst ich es verstanden ;-)

Kommentar schreiben: