Mit PHP zeichnen - Eine Grafik mit PHP erstellen (Tutorial)

Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
➤ Voraussetzung ist eine installierte GD-Grafikbibliothek auf dem Webserver.
Siehe auch: GD-Bibliothek unter XAMPP aktivieren

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 / Grafik]
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.

Den schließenden HTML-Tag (?>) lassen wir weg, dieser wird nicht benötigt und beugt Fehlern vor!

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.
Siehe: Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ

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:

<?php

// Marsbewohner 1



$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



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



imagePng($marsbild); // Ausgabe der Grafik an den Browser senden

imageDestroy($marsbild); // Grafik aus dem Speicher entfernen

➜ Die Grafik-Header-Anweisung: header("Content-type: image/png"); wurde im Skript in eine Zeile kurz vor der Ausgabe an den Browser verschoben. Dadurch werden etwaige PHP-Fehlermeldungen im Skript auch angezeigt.

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:

<?php

// Marsbewohner 2



$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



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



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:

<?php

// Marsbewohner 3



$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



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



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:

<?php

// Marsbewohner 4



$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



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



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:

<?php

// Marsbewohner 5



$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



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



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

Quelltext: marsbewohner_10.php Einblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑

<?php

// Marsbewohner 10



$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

$marsianerfarbe2 = imageColorAllocate($marsbild, 255, 251, 48); // Farbe für das Dreieck erstellen



$marsianer1 = [80, 105,   90, 85,   100, 105]; // Koordinaten des 1 Dreiecks auf der Grafik

$marsianer2 = [150, 95,   160, 115,   170, 95]; // Koordinaten des 2 Dreiecks auf der Grafik



imageFilledPolygon($marsbild, $marsianer1, 3, $marsianerfarbe); // Dreieck zeichnen

imageFilledPolygon($marsbild, $marsianer2, 3, $marsianerfarbe2); // Dreieck zeichnen



// Punkte Zeichnen

$alle_punkte = ($breite * $hoehe) / 20; // Hole die Zahlen der Punkte zum Zeichnen



// Zeichne viele Punkte mit der selben Farbe des Textes

for ($zaehler = 0; $zaehler < $alle_punkte; $zaehler++) {

    $farbe1 = mt_rand("0", "255"); // Zufallsfarbe (RGB) erstellen

    $farbe2 = mt_rand("0", "255");

    $farbe3 = mt_rand("0", "255");

    $farbe = imageColorAllocate($marsbild, $farbe1, $farbe2, $farbe3); // Verteile die Farben



    $pos_x = mt_rand("0", $breite); // Hole die Zufall-Positionen für die Punkte

    $pos_y = mt_rand("0", $hoehe);

    imageSetPixel($marsbild, $pos_x, $pos_y, $farbe); // Zeichne die Punkte

}



// Text einfügen ("Live from Mars")

$schriftfarbe = imageColorAllocate($marsbild, 255, 255, 0); // Farbe der Schrift (Gelb)

imageString($marsbild, 6, 15, 20, "Live from Mars", $schriftfarbe); // Text in die Grafik zeichnen



// 3D-Schrift - Der Text wird jeweils nur um zwei Pixel verschoben

$schriftfarbe = imageColorAllocate($marsbild, 255, 0, 0); // Farbe der Schrift (Rot)

imageString($marsbild, 6, 13, 18, "Live from Mars", $schriftfarbe); // Text in die Grafik zeichnen



// Text einfügen ("CNN")

$schriftfarbe = imageColorAllocate($marsbild, 0, 0, 205); // Farbe der Schrift (Blau)

imageString($marsbild, 6, 13, 125, "CNN", $schriftfarbe); // Text in die Grafik zeichnen



// Linie

$linienfarbe = imageColorAllocate($marsbild, 255, 0, 0); // Farbe der Linie (Rot)

imageSetThickness($marsbild, 2); // Linienstärke setzen

imageLine($marsbild, 235, 140, 10, 140, $linienfarbe); // Linie zeichnen



// Text einfügen (Datum / "we have found life forms")

$schriftfarbe = imageColorAllocate($marsbild, 255, 255, 255); // Datum - Farbe der Schrift

imageString($marsbild, 4, 110, 2, date("d/m/Y H:i"), $schriftfarbe); // Datum in die Grafik zeichnen

imageString($marsbild, 4, 50, 125, "we have found life forms", $schriftfarbe); // Text in die Grafik zeichnen



// Bild einfügen (Bild der Reporterin)

$reporter = imageCreateFromGIF("reporter.gif"); // Bild einlesen

imageCopy($marsbild, $reporter, 195, 30,  0, 0,  40, 46); // Bild an Position kopieren



// Bestimmte Farbe auf der Grafik transparent machen (Mund der Reporterin)

$transparent = imageColorAllocate($marsbild, 190, 109, 70);

imageColorTransparent($marsbild, $transparent);



// Einen schwarzen Rahmen um das Bild zeichnen

$rahmenfarbe = imageColorAllocate($marsbild, 0, 0, 0); // Rahmenfarbe

imageRectangle($marsbild, 1, 1, $breite - 2, $hoehe - 2, $rahmenfarbe); // Rahmen zeichnen



header("Content-type: image/png"); // Grafik-Header (image/png) an den Browser senden



// Ausgabe

imagePng($marsbild); //  Grafik an den Browser senden

imageDestroy($marsbild); // Grafik aus dem Speicher entfernen

Einbinden der Grafik in eine HTML-Seite

Einfach den Dateinamen der PHP-Datei (marsbewohner.php) im SRC-Attribut des <img>-Tags einfügen.

<img src="marsbewohner.php">

Beispiele herunterladen

marsbewohner.zip

Viel Spaß damit!