Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen. ➥ Voraussetzung ist eine installierte GD-Grafikbibliothek auf dem Webserver.
Die aktuelle Version dieser Bibliothek liegt normalerweise der PHP-Distribution bei.
Ob die GD-Bibliothek in Ihrer PHP-Version verfügbar ist, können Sie mit der Anweisung:
<?=phpinfo();?> herausfinden.
In der Ausgabe müsste dann, unter anderem sowas stehen:
![[Bildschirmfoto]
In der PHP-Info kann man auch sehen, welche Bildformate unterstützt werden.](img/gd_bibliothek.png "[Bildschirmfoto]
In der PHP-Info kann man auch sehen, welche Bildformate unterstützt werden.")
Grafik erstellen
Grafik-Header (image/png) an den Browser senden:
<?php
header("Content-type: image/png");
?>
stehen, sonst wird die Grafik nicht angezeigt.
Breite und Höhe der Grafik angeben:
<?php
$breite = 250;
$hoehe = 150;
$marsbild = imageCreateTruecolor($breite, $hoehe);
?>
Farbe für den Hintergrund erstellen:
<?php
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210);
?>
Die Farbangaben erfolgen mit RGB (Rot, Grün, Blau) Zahlenwerte von 0 bis 255.
» Farbtabelle
Grafik mit der Hintergrundfarbe füllen:
<?php
imageFill($marsbild, 0, 0, $wasserfarbe);
?>
0 = Position vom linken und oberen Grafikrand.
Ausgabe der Grafik an den Browser senden:
<?php
imagePng($marsbild);
?>
Grafik aus dem Speicher entfernen:
Zuletzt sollte man die Grafik wieder aus dem Speicher entfernen,
um den Speicher des Webservers nicht unnötig zu belasten.
<?php
imageDestroy($marsbild);
?>
Die erstellte Grafik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
// Marsbewohner 1
header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden
$breite = 250; // Breite der Grafik
$hoehe = 150; // Höhe der Grafik
$marsbild = imageCreateTruecolor($breite, $hoehe); // Grafik erstellen
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210); // Farbe für den Hintergrund erstellen
imageFill($marsbild, 0, 0, $wasserfarbe); // Grafik mit der Hintergrundfarbe füllen
imagePng($marsbild); // Ausgabe der Grafik an den Browser senden
imageDestroy($marsbild); // Grafik aus dem Speicher entfernen
?>
Einen Kreis (Insel) in die Grafik zeichnen
Farbe für den Kreis erstellen:
<?php
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48);
?>
Die Farbangaben erfolgen auch hier mit RGB.
Einen gefüllten Kreis (Ellipse) zeichnen:
<?php
imageFilledEllipse($marsbild, 122, 90, 220, 100, $inselfarbe);
?>
122 = Position vom linken Grafikrand.
90 = Position vom oberen Grafikrand.
220 = Breite der Grafik.
100 = Höhe der Grafik.
Die erstellte Grafik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Marsbewohner 2
header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden
$breite = 250; // Breite der Grafik
$hoehe = 150; // Höhe der Grafik
$marsbild = imageCreateTruecolor($breite, $hoehe); // Grafik erstellen
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210); // Farbe für den Hintergrund erstellen
imageFill($marsbild, 0, 0, $wasserfarbe); // Grafik mit der Hintergrundfarbe füllen
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild, 122, 90, 220, 100, $inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen
imagePng($marsbild); // Ausgabe der Grafik an den Browser senden
imageDestroy($marsbild); // Grafik aus dem Speicher entfernen
?>
Ein Quadrat (Haus) in die Grafik zeichnen
Quadrat zeichnen:
<?php
$hausrahmenfarbe = imageColorAllocate($marsbild, 0, 0, 0);
imageRectangle($marsbild, 55, 55, 120, 120, $hausrahmenfarbe);
?>
55 = Position der linken oberen Ecke.
120 = Position der rechten unteren Ecke.
Quadrat mit Farbe füllen:
<?php
$hausfarbe = imageColorAllocate($marsbild, 128, 128, 128);
imageFill($marsbild, 56, 56, $hausfarbe);
?>
56 = Position der linken oberen Ecke + 1.
Die erstellte Grafik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
// Marsbewohner 3
header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden
$breite = 250; // Breite der Grafik
$hoehe = 150; // Höhe der Grafik
$marsbild = imageCreateTruecolor($breite, $hoehe); // Grafik erstellen
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210); // Farbe für den Hintergrund erstellen
imageFill($marsbild, 0, 0, $wasserfarbe); // Grafik mit der Hintergrundfarbe füllen
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild, 122, 90, 220, 100, $inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen
$hausrahmenfarbe = imageColorAllocate($marsbild, 0, 0, 0); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild, 55, 55, 120, 120, $hausrahmenfarbe); // Quatrat zeichnen
$hausfarbe = imageColorAllocate($marsbild, 128, 128, 128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild, 56, 56, $hausfarbe); // Grafik mit der Hintergrundfarbe füllen
imagePng($marsbild); // Ausgabe der Grafik an den Browser senden
imageDestroy($marsbild); // Grafik aus dem Speicher entfernen
?>
2 Dreiecke („Marsianer”) in die Grafik zeichnen
<?php
$marsianerfarbe = imageColorAllocate($marsbild, 127, 255, 0);
$marsianer1 = array(70,95, 80,75, 90,95);
$marsianer2 = array(150,95, 160,115, 170,95);
?>
Farbe und die Koordinaten der Dreiecke auf der Grafik.
Dreiecke zeichnen:
<?php
imageFilledPolygon($marsbild, $marsianer1, 3, $marsianerfarbe);
imageFilledPolygon($marsbild, $marsianer2, 3, $marsianerfarbe);
?>
Die erstellte Grafik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
// Marsbewohner 4
header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden
$breite = 250; // Breite der Grafik
$hoehe = 150; // Höhe der Grafik
$marsbild = imageCreateTruecolor($breite, $hoehe); // Grafik erstellen
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210); // Farbe für den Hintergrund erstellen
imageFill($marsbild, 0, 0, $wasserfarbe); // Grafik mit der Hintergrundfarbe füllen
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild, 122, 90, 220, 100, $inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen
$hausrahmenfarbe = imageColorAllocate($marsbild, 0, 0, 0); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild, 55, 55, 120, 120, $hausrahmenfarbe); // Quatrat zeichnen
$hausfarbe = imageColorAllocate($marsbild, 128, 128, 128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild, 56, 56, $hausfarbe); // Grafik mit der Hintergrundfarbe füllen
$marsianerfarbe = imageColorAllocate($marsbild, 127, 255, 0); // Farbe für das Dreieck erstellen
$marsianer1 = array(70,95, 80,75, 90,95); // Koordinaten des 1 Dreiecks auf der Grafik
$marsianer2 = array(150,95, 160,115, 170,95); // Koordinaten des 2 Dreiecks auf der Grafik
imageFilledPolygon($marsbild, $marsianer1, 3, $marsianerfarbe); // Dreieck zeichnen
imageFilledPolygon($marsbild, $marsianer2, 3, $marsianerfarbe); // Dreieck zeichnen
imagePng($marsbild); // Ausgabe der Grafik an den Browser senden
imageDestroy($marsbild); // Grafik aus dem Speicher entfernen
?>
Text in die Grafik einfügen
<?php
$schriftfarbe = imageColorAllocate($marsbild, 255, 0, 0);
ImageString($marsbild, 6, 15, 10, "Live from Mars", $schriftfarbe);
?>
6 = Schriftgröße (0 - 6)
15 = Position von links
10 = Position von oben
Die erstellte Grafik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
// Marsbewohner 5
header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden
$breite = 250; // Breite der Grafik
$hoehe = 150; // Höhe der Grafik
$marsbild = imageCreateTruecolor($breite, $hoehe); // Grafik erstellen
$wasserfarbe = imageColorAllocate($marsbild, 109, 191, 210); // Farbe für den Hintergrund erstellen
imageFill($marsbild, 0, 0, $wasserfarbe); // Grafik mit der Hintergrundfarbe füllen
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild, 122, 90, 220, 100, $inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen
$hausrahmenfarbe = imageColorAllocate($marsbild, 0, 0, 0); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild, 55, 55, 120, 120, $hausrahmenfarbe); // Quatrat zeichnen
$hausfarbe = imageColorAllocate($marsbild, 128, 128, 128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild, 56, 56, $hausfarbe); // Grafik mit der Hintergrundfarbe füllen
$marsianerfarbe = imageColorAllocate($marsbild, 127, 255, 0); // Farbe für das Dreieck erstellen
$marsianer1 = array(70,95, 80,75, 90,95); // Koordinaten des 1 Dreiecks auf der Grafik
$marsianer2 = array(150,95, 160,115, 170,95); // Koordinaten des 2 Dreiecks auf der Grafik
imageFilledPolygon($marsbild, $marsianer1, 3, $marsianerfarbe); // Dreieck zeichnen
imageFilledPolygon($marsbild, $marsianer2, 3, $marsianerfarbe); // Dreieck zeichnen
$schriftfarbe = imageColorAllocate($marsbild, 255, 0, 0); // Farbe der Schrift
ImageString($marsbild, 6, 15, 15, "Live from Mars", $schriftfarbe); // Text in die Grafik zeichnen
imagePng($marsbild); // Ausgabe der Grafik an den Browser senden
imageDestroy($marsbild); // Grafik aus dem Speicher entfernen
?>
Es gibt vielfältige Möglichkeiten wie Sie die Grafik weiter gestalten können. Mit ein wenig JavaScript werden die Grafiken immer wieder neu geladen. Wer wissen will wie das funktioniert, der sollte in den Quelltext dieser Seite schauen.
 |
||
 |
 |
|
 |
||
|---|---|---|
Sie sehen also, der künstlerischen Freiheit sind mit Grafiken keine Grenzen gesetzt 
Einbinden der Grafik in eine HTML-Seite:
<img src="marsbewohner.php">
Herunterladen: marsbewohner.zip
Viel Spaß damit!
Tipps
- Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
- Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.
- Browser-Sprachumschaltung
- Diese Sprachumschaltung zeigt je nach der verwendeten Sprache (deutsch, englisch, ...) im Browser unterschiedlichen Inhalt an.
- Zeitbalken
- Dieses Script zeigt die vergangene Zeit mit einem farbigen Fortschrittsbalken an. Mit JavaScript oder PHP kann man die vergangene Zeit berechnen lassen und mit CSS wird dann der Fortschrittsbalken farbig angezeigt.
Diese Schlagwörter könnten Sie interessieren:
Gästebuch Zebra-Tabelle Textgestaltung Lokaler Webserver Mimetypen PHP-Fehlermeldungen Diashow MySQL Counter Floodsperre Formulare ASCII JSON Veranstaltungsliste Suchmaschine Datenschutz-Hinweis Canvas Marquee Quelltext Responsiv
Gästebuch Zebra-Tabelle Textgestaltung Lokaler Webserver Mimetypen PHP-Fehlermeldungen Diashow MySQL Counter Floodsperre Formulare ASCII JSON Veranstaltungsliste Suchmaschine Datenschutz-Hinweis Canvas Marquee Quelltext Responsiv