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.
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($marsbild, 109, 191, 210);
?>
Die Farbangaben erfolgen mit RGB (Rot, Grün, Blau) Zahlenwerte von 0 bis 255.
»
Farbtabelle anzeigen
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:
<?php
imageDestroy($marsbild);
?>
Die erstellte Grafik:
Quelltext: „marsbewohner_1.php” 
Quelltext anzeigen
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
?>
|
• Eine Insel (Kreis) in die Grafik einfügen
Farbe für den Kreis erstellen:
<?php
$inselfarbe = imageColorAllocate($marsbild, 154, 69, 48);
?>
Die Farbangaben erfolgen auch hier mit RGB.
Einen gefüllten Kreis (Elipse) 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:
Quelltext: „marsbewohner_2.php” Quelltext anzeigen
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 Haus (Quatrat) in die Grafik einfügen
Quatrat 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.
Quatrat 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:
Quelltext: „marsbewohner_3.php” Quelltext anzeigen
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 „Marsianer” (Dreiecke) in die Grafik einfügen
<?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:
Quelltext: „marsbewohner_4.php” Quelltext anzeigen
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:
Quelltext: „marsbewohner_5.php” Quelltext anzeigen
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 Grafik weiter gestalten können.
Sie sehen also, der künstlerischen Freiheit sind mit Grafiken keine
Grenzen gesetzt ;-)
Einbinden der Grafik in eine HTML-Seite:
<img src="marsbewohner.php">
Alle Dateien zum herunterladen:
marsbewohner.zip
marsbewohner.zip
Version vom: 03.08.2010
Dateigröße: 4,58 KB
Dateien: 7
marsbewohner.php - 466 Byte
marsbewohner_1.php - 567 Byte
marsbewohner_2.php - 773 Byte
marsbewohner_3.php - 1,1 KB
marsbewohner_4.php - 1,6 KB
marsbewohner_5.php - 1,7 KB
marsbewohner_6.php - 3,4 KB
HomePage-Total.de Webseiten erstellen, optimieren und aufpeppen
Formulare mit PHP erstellen und überprüfen
Das könnte Sie interessieren:
Ladehinweis bei großen Bildern anzeigen - Große Bilder sollten mit einem Ladehinweis erscheinen, damit der Besucher die Seite nicht verlässt bevor er das Bild gesehen hat.
Kontakt —
Impressum —
Banner
Seitenanfang
Lesezeichen setzen