• Journal
• Essays
• Tools
• Info

Einführung in die gdLibrary (gdLib)

Schrifteinbettung

Es ist allgemein bekannt, dass man im Internet nur eine Handvoll Schriften nutzen sollte, da nur bei diesen wahrscheinlich ist, dass diese auch bei jedem Computer installiert sind und angezeigt werden können.
Gesetzt den Fall, ein Webdesigner möchte nun eine bestimmte Schriftart für alle Überschriften nutzen, die nicht Bestandteil dieser Standardschriften sind, bleibt ihm nur übrig, sämtliche Überschriften in Photoshop zu erstellen und als Bild einzubinden. Das ist viel Arbeit.
Natürlich kann uns die gdLib die Arbeit abnehmen und uns diese Bilder dynamisch zur Laufzeit erstellen. Das spart eine Menge Zeit.

Aufgabe: Überschriften aus eigenen ttf-Fonts erstellen

Der Übersichtlichkeit halber definieren wir zuerst einmal grundsätzliche Einstellungen, damit wir später bei Änderungen nicht immer danach suchen müssen. Ganz wichtig ist hierbei die korrekte Angabe der ttf-Schriftart mit Pfad (auf Groß- und Kleinschreibung achten).
imagettfbbox() errechnet nun aus den Informationen den benötigten Platz für unseren Text im späteren Bild. Wir erhalten ein Array und können mit imagecreate() und unseren Informationen ein neues Bild erstellen, mit dem wir arbeiten werden.
Nun definieren wir Text- und Hintergrundfarbe mit imagecolorallocate() und füllen mit imagefill() unser Bild. imagettftext() erzeugt nun schließlich unseren Text im Bild. imagepng() gibt uns das Bild wie gewohnt aus. Je nach Font solltet man mit Abständen rumspielen, bis man das gewünschte Ergebnis erzielt.
Für alle, die das neu erzeugte Bild im Hintergrund transparent haben wollen, damit der Hintergrund der Webseite durchscheint, empfehle ich, als Hintergrundfarbe eine abgeschwächte Version der Textfarbe zu verwenden. Der Befehl imagecolortransparent() entfernt die Hintergrundfarbe und erzeugt uns einen freigestellten Schriftzug in manierlicher Anti-Aliasing-Methode (Weichzeichnung).

Der Code:

<?php
 
header('Content-type: image/png');
 
// Setup
$text             = 'Fluch der Karibik - jetzt im Kino';
$fontfile         = 'pristina.ttf';
$fontsize         = 40; 
$fontangle        = 0; 
 
// Ausmaße des Feldes ermitteln, den unser Text braucht
$textfield        = imagettfbbox($fontsize, $fontangle, $fontfile, $text); 
$text_size_x      = (abs($textfield[4] - $textfield[0]) + 5);
$text_size_y      = (abs($textfield[1] - $textfield[7]) + 5);
$text_pos_x       = 0;
$text_pos_y       = ($text_size_y - 25);
 
// Unser Arbeitsbild erstellen
$new_picture      = imagecreate($text_size_x, $text_size_y);
 
// Farben bestimmen
$background_color = imagecolorallocate($new_picture, 250, 170,   0);
$text_color       = imagecolorallocate($new_picture, 0, 51, 102);
 
imagefill($new_picture, 0, 0, $background_color);
imagettftext($new_picture, $fontsize, $fontangle, $text_pos_x, $text_pos_y, $text_color, $fontfile, $text);
 
// Hintergund transparent stellen
#imagecolortransparent($new_picture, $background_color);
 
// Ausgabe des Bildes und anschliessende Löschung aus dem Speicher
imagepng($new_picture);
imagedestroy($new_picture);
 
?>

Mit diesem Code kann man ganz schnell eine Datei schreiben, die Überschriften für Webseiten dynamisch zur Laufzeit generiert.

Unser generiertes Bild mit glattem Schriftzug ohne Kanten.

• « Bildformate
• Wasserzeichen »

Einführung in die gdLib | Version 2.0 alpha | 2005-10-07