Bunte Spielereien - entwickler.de

Natürlich kann eine Grafikbibliothek und die dazugehörige Programmiersprache, in diesem Fall PHP, kein Grafikprogramm wie The GIMP oder Adobe Photoshop ersetzen. Viele automatisierte Effekte fehlen und die Programmierung von Grafiken ist auch nicht jedermanns Sache – vor allem Designer verzweifeln schnell. Dennoch, wenn es dynamisch sein soll, ist das Programmieren oder Ändern von Grafiken on-the-fly auf jeden Fall einen Blick wert. Dieser Artikel zeigt viele interessante Beispiele und simuliert Effekte mit PHP, die Sie sicher auch aus Grafikprogrammen kennen.

extensions=php_gd2.dll

Der Reiz einer dynamischen Navigation liegt darin, beliebig viele unterschiedlich beschriftete Navigationselemente per Skriptsprache zu generieren. Wenn es dann noch schön aussehen soll, benötigen Sie Grafiken dazu. Sie könnten die Grafiken natürlich komplett mit der GD2 erstellen. Allerdings ist dies etwas umständlich, da manche Elemente, wie abgerundete Rechtecke, Schatten oder ähnliches nicht vorhanden sind und sehr umständlich simuliert werden müssten. Als praxistauglicher erweist sich die Variante, einen Button in einem Grafikprogramm vorzuzeichnen und den Text dynamisch mittels der GD2 hinzuzufügen. Allerdings sind auch bei dieser Variante ein paar Klippen zu umschiffen, wenn Sie Buttons mit 256 Farben verwenden: Ein PNG mit 256 Farben belegt, wenn es mit imagecreatefrompng() geladen wird, schon alle 256 Farben in der Palette. Wenn Sie eine Beschriftung mit einer eigenen Farbe erstellen, findet diese Farben keinen Platz mehr in der Farbpalette. Auch die Funktion imagecolorresolve() hilft hier nicht viel. Sie verwendet immer die nächstgelegene Farbe, scheitert allerdings im folgenden Beispiel daran, dass kein Rotton im Bild vorhanden ist:

Abb. 1: Die Farbe, die rot am nächsten kommt, ist hier ein „versupptes“ Grau

Das Dithering ist ein Boolean und gibt an, wie bei einer Farbreduktion verfahren wird. Ist Dithering aktiv (true), werden wegreduzierte Farben durch eine Kombination aus ähnlichen Farben simuliert. In unserem Beispiel ist die Farbreduktion nicht schwerwiegend, weswegen Dithering nicht notwendig ist. Am Schluss folgt ein roter Text, um zu zeigen, dass Sie nun eigene Farben definieren können:

Abb. 2: Aus dem Grau ist echtes Rot geworden.

Wenn Sie auf eine dynamische Navigation setzen, können natürlich noch weitere Probleme auftreten. Für Ärger sorgt beispielsweise ein fehlendes Originalpicture. Hierzu finden Sie in der PHP-Dokumentation unter www.php.net/manual/de/function.imagecreatefrompng.php ein einfaches Skript zum Fehlerhandling. Zusätzlich haben Sie die Möglichkeit, in das Skript weitere Automatismen einzubauen. Wenn Sie beispielsweise nicht wissen, wie groß das Originalpicture ist, können Sie mit imagesx() und imagesy() Breite und Höhe ausmessen und automatisch in das neu erstellte Bild übernehmen:

Abb. 5: Weiß wird transparent und der Button passt sich in den Hintergrund ein.

Nachdem Sie das Bild geladen haben, starten Sie eine Schleife, die die Indexwerte aller Farben durchläuft. Mit imagecolorstotal(Bild) finden Sie die Gesamtzahl der Farben des Bildes heraus und stoppen die Schleife. Für jeden Indexwert liefert imagecolorsforindex(Bild, Index) die RGB-Farbwerte als assoziativen Array. red steht für Rot, green für Grün und blue für Blau. Die Formel zur Graustufenberechnung ist einfach. Sie addieren die drei Farbwerte und pictureen den Mittelwert, indem Sie die Summe durch 3 teilen. Da Graustufen immer aus drei gleichen Farbwerten bestehen, setzen Sie bei imagecolorset() den Mittelwert für Rot, Grün und Blau ein.

Abb. 6: PHP wandelt den Button in Graustufen um.

Etwas eleganter erfolgt die Umwandlung, wenn die einzelnen Farbwerte gewichtet werden. Die notwendigen Werte hängen natürlich größtenteils vom Originalpicture ab. Oftmals ist es für das Graustufen-Ergebnis am günstigsten, Grün am stärksten und Blau am zweitstärksten zu gewichten. Die Berechnung ändert sich nur in einer Zeile:

Abb. 9: Links das Original, rechts die Verkleinerung mit PHP.

Zum Abschluss erhält die Spielwiese der dynamischen Grafiken noch ein wenig Würze mit einem zufallsbasierten Bild. Listing 1 erzeugt ein Bild, das aus lauter Ellipsen besteht (fünfzig, um genau zu sein). Diese Ellipsen haben alle eine zufällige Größe und eine zufällige Farbe. Einzige Bedingung ist, dass keine Ellipse über den Rand des Bildes hinausragen darf. Eine Schleife erzeugt die Ellipsen. In der Schleife wird die Farbe mit den drei Farbwerten über eine Zufallszahl von 0 bis 255 zusammengesetzt. Die Koordinaten für den Mittelpunkt der Ellipse ($s_x und $s_y) sind ebenso von einer Zufallszahl abhängig, wie Breite und Höhe ($e_x, $e_y). Vier Fallunterscheidungen überprüfen, ob die Ellipse über die Grenzen des Bildes hinausragen würde. Ist dies der Fall, wird die Breite so angepasst, dass die Ellipse genau auf der Grenze endet. Zum Schluss verwendet imageellipse() die Angaben, um die Ellipse zu zeichnen (Listing 1).Listing 1

Bildmanipulationen begeistern Designer und Programmierer gleichermaßen. Die dynamischen Möglichkeiten der GD in Verbindung mit PHP wissen auch in den hier gezeigten Beispielen zu überzeugen. In der Praxis stellt sich immer die Frage, wie viel wirklich dynamisch gestaltet werden muss und wann das Grafikprogramm doch besser geeignet ist. Natürlich verkleinert ein Bildbearbeitungsprogramm Bilder sauberer, dafür entfällt bei der dynamischen Variante der zusätzliche Speicherplatz für die Thumbnails. Bildkorrekturen und Graustufenumwandlungen nimmt ein Webdesigner normalerweise in GIMP oder Photoshop vor, wenn eine Website allerdings kurzfristig oder zufallsbasiert Grau-in-Grau wirken soll, ist die dynamische Bildänderung schneller und pfiffiger. Gerade der Zufall eröffnet auch neue Möglichkeiten der Gestaltung. Ändern Sie doch einfach mal zufällig die Farbe Ihres Logos, so dass jeder Nutzer eine andere Optik sieht. Wer jetzt schimpft, das wären doch alles nur Spielereien, der hat zumindest bei per Zufall generierten Bildern Recht. Aber steckt nicht in jedem PHP-Programmierer, der freudig, wütend, verbissen und zum Schluss hoffentlich stolz an seinem Skript bastelt, ein kleines Spielkind? Tobias Hauser (th@hauser-wenz.de) ist Autor, Trainer und Berater in den Bereichen Web-Design und Web-Entwicklung. Als Speaker treffen Sie ihn auf nationalen und internationalen Konferenzen.

PHP Magazin 2.03, S.50

Relevante Beiträge