[WarrenFaith]

Diese Tutorial befasst sich mit der Erstellung und Bearbeitung von Bildern mittels PHP.

besondere Vorraussetzungen:
- GD-Bibliothek installiert (verfügbar unter http://www.boutell.com/gd/)

Informationen zu GD:
Versionen vor gd-1.6 unterstützen das GIF- aber kein PNG-Format.
Die Versionen danach unterstützen zwar das PNG- aber nicht mehr das GIF-Format.


Bilder und Grafiken dynamisch erzeugen und bearbeiten

Das nachfolgende Beispiel erzeugt eine Karte auf welcher Koordinaten und dazugehörige Nummer/Texte zu den Koordinaten abgebildet werden.
Als erstes erstellen wir eine PHP-Datei in dem wir das Skript unterbringen werden. Beispielsweise map_create.php.

PHP-Code:

<?php
    $im = ImageCreate(800, 800); // Erstellt ein Image der größe 800x800
?>

Nun haben wir ein Image in einer Variablen gespeichert und können nun Eigenschaften des Image festlegen.
Beginnen wir mit Hintergrund- und Textfarben

PHP-Code:

<?php
    $im = ImageCreate(800, 800);
    // Die nachfolgenden Farben beziehen sich auf RGB Format mit
    // 0-255 als Integerwerte (Ganzzahlig)
    // Jede Farbe bezieht sich auf das oben erstellte Image $im
    // Helles Blau als Hintergrundfarbe
    $background_color = ImageColorAllocate ($im, 0, 100, 255);
    // Grüne Punktfarbe
    $koordinaten_punkt = ImageColorAllocate ($im, 0, 255, 0);
    // Rote Textfarbe
    $kordinaten_text = ImageColorAllocate ($im, 255, 0, 0);
?>

Nun könnten wir Testweise unser Bild ausgeben, wir benötigen dafür einen Header.

PHP-Code:

<?php
    // Ohne diesen Header wird ein ausgegebenes Bild als String ausgegeben
    // Natürlich nicht das, was wir haben wollen
    header ("Content-type: image/png");
    $im = ImageCreate(800, 800);
    $background_color = ImageColorAllocate ($im, 0, 100, 255);
    $koordinaten_punkt = ImageColorAllocate ($im, 0, 255, 0);
    $kordinaten_text = ImageColorAllocate ($im, 255, 0, 0);
    // Ausgabe des erstellten Images an den Browser
    ImagePNG($im);
?>

Was wir hier erhalten ist ein hellblaues Bild ohne Koordinatenpunkte oder Text.
Diese fügen wir folgendermaßen ein.

PHP-Code:

<?php
    header ("Content-type: image/png");
    $im = ImageCreate(800, 800);
    $background_color = ImageColorAllocate ($im, 0, 100, 255);
    $punkt_color = ImageColorAllocate ($im, 0, 255, 0);
    $text_color = ImageColorAllocate ($im, 255, 0, 0);
    // Nachfolgend fügen wir einen Punkt ein
    imagesetpixel($im, 400, 400, $punkt_color);
    // Ein Pixel ist schlecht zu sehen, machen wir ihn also größer (2x2)
    imagesetpixel($im, 401, 400, $punkt_color);
    imagesetpixel($im, 400, 401, $punkt_color);
    imagesetpixel($im, 401, 401, $punkt_color);
    // Nun brauchen wir natürlich auch einen Text, damit wir wissen
    // was der Punkt für Koordinaten hat
    // $im ist das Bild, wo der Text rein soll
    // 3 ist die Schriftgröße
    // 377 / 405 sind die Koordinaten der linken oberen Ecke des Textes
    // $text_color ist die Textfarbe
    ImageString ($im, 3, 377, 405, "400:400", $text_color);
    ImagePNG($im);
?>

Damit sehen wir nun im Zentrum der Karte unseren Punkt sowie den eingefügten Text.

Das Bild auf euren Server zu speichern, ist natürlich ebenfalls möglich.
Dafür müsst ihr auf den Header verzichten sowie einen Pfad und Dateinamen angeben, wo das Bild gespeichert werden soll.

PHP-Code:

<?php
    //Header wurde entfernt
    $im = ImageCreate(800, 800);
    $background_color = ImageColorAllocate ($im, 0, 100, 255);
    $punkt_color = ImageColorAllocate ($im, 0, 255, 0);

    $text_color = ImageColorAllocate ($im, 255, 0, 0);
    imagesetpixel($im, 400, 400, $punkt_color);
    imagesetpixel($im, 401, 400, $punkt_color);
    imagesetpixel($im, 400, 401, $punkt_color);
    imagesetpixel($im, 401, 401, $punkt_color);
    ImageString ($im, 3, 377, 405, "400:400", $text_color);
    // Speicherung des Images in der Datei map.png
    ImagePNG($im, "map.png");
?>

Damit verhindert ihr, dass ihr jedes mal euer Bild erstellen müsst, wenn ihr es anzeigen lassen wollt.
Beim Aufruf dieses Scripts wird dann allerdings eine leere Seite angezeigt, da die Bildausgabe in die Datei umgeleitet wurde.

Zum öffnen eines vorhandenen Bildes muss das Script wie folgt abgeändert werden.

PHP-Code:

<?php
    // Ohne diesen Header wird ein ausgegebenes Bild als String ausgegeben
    // Natürlich nicht das, was wir haben wollen
    header ("Content-type: image/png");
    // Öffnen eines bereits existierenden Images zur Bearbeitung
    $im = ImageCreateFromPNG("map.png");
    $background_color = ImageColorAllocate ($im, 0, 100, 255);
    $punkt_color = ImageColorAllocate ($im, 0, 255, 0);
    $text_color = ImageColorAllocate ($im, 255, 0, 0);
    imagesetpixel($im, 400, 400, $punkt_color);
    imagesetpixel($im, 401, 400, $punkt_color);
    imagesetpixel($im, 400, 401, $punkt_color);
    imagesetpixel($im, 401, 401, $punkt_color);
    ImageString ($im, 3, 377, 405, "400:400", $text_color);
    // Ausgabe des erstellten Images an den Browser
    ImagePNG($im);
?>

Wenn es schon dieses Bild gibt, wird die Koordinate nur darüber gezeichnet.
Die Hintergrundfarbe übermalt nicht das vorhandene Bild, sie kommt nur zum Einsatz, wenn ihr ein Pixel löschen wollt.

Ich hoffe dies hat euch einen ersten Einblick in die Möglichkeiten der Grafikerstellung mittels PHP verschafft.
Wenn ihr mehr wissen wollt, dann findet ihr eine Funktionssammlung und Erklärung unter www.php.net/image

[CIX88]

Ergänzung zum Tutorial

ImageCreate() oder ImageCreateTrueColor ?()

In vielen Tutorials wird ImageCreate() zum erstellen von Bildern benutzt,
und nicht sehr selten wundert sich der ein oder andere darüber, dass seine Bilder etwas komisch aussehen.
Das Bilder nicht in voller Farbenbracht erstellt werden.

Meist wird dies bemerkt, wenn man Bilder bzw. Fotos mittels

• ImageCreateFromJPEG
• ImageCreateFromPNG

lädt um damit z.B. Thumbnails oder nur Kopien zu erstellen.

So wird auch im Manuell zu PHP darauf hingewiesen ImageCreateTrueColor() zu benutzen.
http://www.php.net/imagecreate

Der Grund dafür liegt ist wie folgt:

ImageCreate() erstellt nur Bilder mit max. 256 Farben.
Auch wenn man 24bit-Bilder (3x 8bit) lädt kommen nur Bilder mit max. 256-Farben heraus.

ImageCreateTrueColor() behebt nun dieses Problem und das Urlaubsfoto kann mit voller Farbanzahl erstellt werden.

Kleine Übersicht

• ImageCreate()
  PNG -> 8bit mit 256 Farben
  JPEG -> 24bit jedoch nur mit max. 256 Farben
  
• ImageCreateTrueColor()
  PNG -> 24bit bzw. 32bit
  JPEG -> 24bit TrueColor

Zur Erstellung von Diagrammen reicht sicherlich auch ImageCreate(),
aber in Verbindung mit Fotos sollte man auf ImageCreateTrueColor() nicht verzichten.