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.
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");
?>
Wichtig ist, das vor dem HTML-Tag (<php) keine Zeichen (auch keine Leerzeichen)
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($marsbild109191210);
?>

Die Farbangaben erfolgen mit RGB (Rot, Grün, Blau) Zahlenwerte von 0 bis 255.
» Farbtabelle

Grafik mit der Hintergrundfarbe füllen:

<?php
imageFill
($marsbild00$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($marsbild109191210); // Farbe für den Hintergrund erstellen
imageFill($marsbild00$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($marsbild1546948);
?>

Die Farbangaben erfolgen auch hier mit RGB.

Einen gefüllten Kreis (Ellipse) zeichnen:

<?php
imageFilledEllipse
($marsbild12290220100$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($marsbild109191210); // Farbe für den Hintergrund erstellen
imageFill($marsbild00$wasserfarbe); // Grafik mit der Hintergrundfarbe füllen

$inselfarbe imageColorAllocate($marsbild1546948); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild12290220100$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($marsbild000);
imageRectangle($marsbild5555120120$hausrahmenfarbe);
?>

55 = Position der linken oberen Ecke.
120 = Position der rechten unteren Ecke.

Quadrat mit Farbe füllen:

<?php
$hausfarbe 
imageColorAllocate($marsbild128128128);
imageFill($marsbild5656$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($marsbild109191210); // Farbe für den Hintergrund erstellen
imageFill($marsbild00$wasserfarbe); // Grafik mit der Hintergrundfarbe füllen

$inselfarbe imageColorAllocate($marsbild1546948); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild12290220100$inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen

$hausrahmenfarbe imageColorAllocate($marsbild000); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild5555120120$hausrahmenfarbe); // Quatrat zeichnen

$hausfarbe imageColorAllocate($marsbild128128128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild5656$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($marsbild1272550);
$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$marsianer13$marsianerfarbe);
imageFilledPolygon($marsbild$marsianer23$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($marsbild109191210); // Farbe für den Hintergrund erstellen
imageFill($marsbild00$wasserfarbe); // Grafik mit der Hintergrundfarbe füllen

$inselfarbe imageColorAllocate($marsbild1546948); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild12290220100$inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen

$hausrahmenfarbe imageColorAllocate($marsbild000); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild5555120120$hausrahmenfarbe); // Quatrat zeichnen

$hausfarbe imageColorAllocate($marsbild128128128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild5656$hausfarbe); // Grafik mit der Hintergrundfarbe füllen

$marsianerfarbe imageColorAllocate($marsbild1272550); // 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$marsianer13$marsianerfarbe); // Dreieck zeichnen
imageFilledPolygon($marsbild$marsianer23$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($marsbild25500);
ImageString($marsbild61510"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($marsbild109191210); // Farbe für den Hintergrund erstellen
imageFill($marsbild00$wasserfarbe); // Grafik mit der Hintergrundfarbe füllen

$inselfarbe imageColorAllocate($marsbild1546948); // Farbe für den Kreis (Insel) erstellen
imageFilledEllipse($marsbild12290220100$inselfarbe); // Einen gefüllten Kreis (Elipse) zeichnen

$hausrahmenfarbe imageColorAllocate($marsbild000); // Farbe für das Quatrat (Haus) erstellen
imageRectangle($marsbild5555120120$hausrahmenfarbe); // Quatrat zeichnen

$hausfarbe imageColorAllocate($marsbild128128128); // Farbe für das Quatrat (Haus) erstellen
imageFill($marsbild5656$hausfarbe); // Grafik mit der Hintergrundfarbe füllen

$marsianerfarbe imageColorAllocate($marsbild1272550); // 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$marsianer13$marsianerfarbe); // Dreieck zeichnen
imageFilledPolygon($marsbild$marsianer23$marsianerfarbe); // Dreieck zeichnen

$schriftfarbe imageColorAllocate($marsbild25500); // Farbe der Schrift
ImageString($marsbild61515"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

Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Spalten einer Tabelle dynamisch ändern
Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
Mit PHP schreiben und lesen
Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.
Diese Schlagwörter könnten Sie interessieren:
Floodsperre Metadaten Responsiv Rahmen Veranstaltungsliste Wasserzeichen Sprachumschaltung Zebra-Tabelle Hover-Effekt Dateibrowser Suchmaschine Webseitenschutz SQLite Dynamische Seiten Quelltext Linkliste localStorage Mauszeiger Seitenformatierung Sitemaps-Protokoll