Dynamische Grafiken mit PHP Teil 3

In diesem Howto werden folgende Themen besprochen:

Bilder richtig skalieren (Größe verändern)

Transparenz in Bildern

Bilder skalieren
Oft ist es nötig, die Größe eines Bildes zu verändern. Nehmen wir als Beispiel ein Fotoalbum im Internet in der Verwandte oder Freunde Bilder hinzufügen können. Natürlich sollen automatisch kleine Voransichten der Bilder, sogenannte Thumbnails, erzeugt werden, damit Übersichtsseiten generiert werden können auf denen ein Foto ausgewählt werden kann, um es später in voller Größe anzusehen.
Dabei werden bestimmte Anforderungen an ein solches Thumbnail gestellt. Als erstes soll das Originalbild natürlich nicht verzerrt werden. Das bedeutet, dass das Höhe zu Breite Verhältnis erhalten bleiben muss. In der Beispielgrafik ist das Seitenverhältnis bei beiden Bildern konstant 16 zu 11.

Die wichtigste Funktion ist dabei imagecopyresized. Mit ihr lassen sich ein Bereich aus einem Bild in ein anderes kopieren. Als erstes Braucht man natürlich ein gültiges Handle auf die bestehende Bilddatei. Die lässt sich mit den imagecreatefromX Funktionen erledigen, wobei X für gif, jpeg, png oder wbmp stehen kann, je nach den unterstützten Grafikformaten der GDLibrary.
Um später ein kleineres Bild mit dem gleichen Seitenverhältnis zu erzeugen brauchen wir als erstes Höhe und Breite der bestehenden Datei. Diese lassen sich mit imagesx für die Breite und imagesy für die Höhe abfragen. Als einzigen Parameter erwarten die beiden Funktionen nur das Handle des Bildes.

Damit alle kleinen Bilder möglichst gleich groß werden, müssen wir uns entscheiden, ob alle gleich breit oder gleich hoch werden sollen. Der jeweils andere Wert muss dann berechnet werden. In diesem Beispiel wird eine Breite von 55 Pixeln angestrebt. Wie errechnet man nun die zugehörige Höhe, das Bild soll schließlich nicht verzerrt werden. Als erstes Bilden wir den Quotient aus der Originalbreite und den angestrebten 55 Pixeln. Das ist der Vergößerungs- bzw. Verkleinerungsfaktor. Damit multiplizieren wir die Originalhöhe und speichern das Ergebnis in einer Variablen. Das ist die neue Höhe - ganz im Verhältnis zur Originalbreite.
Als nächstes erzeugen wir ein leeres Bild mit den neuen Seitenlängen und kopieren anschließend das Originalbild in das verkleinerte Bild. Letzteres erledigt imagecopyresized für uns.
Imagecopyresized erwartet eine ganze Reihe von Parametern.

int imagecopyresized(int dst_im, int src_im, int dstX, int dstY, int srcX, int srcY, int dstW, int dstH, int srcW, int srcH)

Das Bild in das hineinkopiert werden soll, also das Ziel der Operation muss für den Parameter dst_im angegeben werden. Bei src_im wird das Quellbild erwartet. Danach werden die Koordinaten der linken oberen Ecke des kopierten Bereiches im Zielbild erwartet (dstX und dstY). Die mit srcX und srcY bezeichneten Parameter legen Zusammen mit srcW und srcH den zu kopierenden Bildausschnitt im Quellbild an. SrcX und srcY legen die linke obere Ecke des Bereichs fest, srcW und srcH die davon ausgehende Breite und Höhe. Interessant wird es bei den Parametern dstW und dstH. Durch diese wird die Breite und die Höhe des kopierten Bildausschnitts im Zielbild definiert.

Dann fehlt ja nur noch der Quellcode:

//$imghandle ist ein gültiges Handle auf das Originalbild
$preferredWidth = 55;
$x = imagesx($imghandle);
$y = imagesy($imghandle);
$factor = $preferredWidth / $x;
$newy = $factor * $y;

$img2 = imagecreatetruecolor($preferredWidth, $newy);
imagecopyresized($img2, $imghandle, 0, 0, 0, 0, $preferredWidth, $newy, $x, $y);

Natürlich wird hier das Gesamt Quellbild als zu kopierender Bildausschnitt gewählt. Zum Schluss müsste man $img2 speichern und fertig wäre das Thumbnail. Mit einem an eine bestimmte Höhe angepassten Thumbnail verläuft das ganz Analog.

Transparenz in Bildern
Transparenz in Bildern bietet eine gute Möglichkeit ein und das selbe Bild auf verschiedenen Hintergründen optimal darzustellen. Häufig benutzen Webmaster dazu transparente Gif-Bilder. Auch diese lassen sich dynamisch erzeugen. Unter PHP steht die Funktion imagecolortransparent dazu zur Verfügung. Allerdings gibt es hier einige Beschränkungen, was das Grafikformat angeht. So lassen sich nur die Formate zur Ausgabe des Bildes nutzen, die auch transparente Bereiche unterstützen. Das sind derzeit GIF und PNG. Das GIF Format ist nur in GDLib Versionen in nichtamerikanischen Staaten verfügbar, da CompuServe US-weite Rechte auf das Format hat.

int imagecolortransparent(int im [, int col])

Imagecolortransparent erwartet zwei Parameter. Als erstes wird das Handle auf die Grafik übergeben und als zweites die Farbe, die im Bild als transparenter Bereich dargestellt werden soll. Die Farbe muss zuvor mit Hilfe von imagecolorallocate erzeugt werden. Um bestimmte Bereiche im Bild als transparent zu markieren müssen diese mit der Farbe ausgefüllt werden. Danach wendet man imagecolortransparent an.