[PHP] Text mit nicht standard Font auf zum Teil transparentes Bild

Möchte man mal eine Schrift verwenden, die nicht standardmäßig in jedem Betriebssystem und/oder Browser integriert ist, kann man dies nicht ohne weiteres per CSS lösen.
Ich stand auch vor diesem Problem und musste feststellen, dass man einen Umweg machen muss, indem man ein Bild mit dieser Schriftart per PHP erstellen muss.

Damit dies überhaupt möglich ist, muss man sich die GD-Library herunterladen und installieren. Diese gibt es für Windows, Linux und Mac OS X.

Man startet dann damit, dass man sich in z.B. Gimp oder Photoshop ein transparentes Bild mit dem gewünschten Format erstellt und dann als PNG abspeichert. Dieses wird am besten in einem Unterordner „Bilder“ (um Ordnung zu halten) im Verzeichnis erstellt, wo sich die PHP-Datei befindet.

Um möglichst flexibel zu sein, ist es empfehlenswert sich hierfür eine eigene Funtion in einer eigenen PHP-Datei mit den nötigen Parametern (je nach Belieben) zu erstellen, z.B.:

function erzeugeTextAufBild($text, $fontsize)

Anschließend fügt man in dieser Funktion folgenden Code ein:

Header('Content-type: image/png');
$img = ImageCreateFromPNG("Pfad zum transparenten Bild");
$color = ImageColorAllocate($img, 255, 255, 255); //Farbe der Schrift
$ttf = "Pfad zur Schriftart"; //Schriftart
$ttfsize = $fontsize; //Schriftgroesse
$angle = 0;  // Winkel der Schrift
$t_x = 21; // Startpunkt x auf dem transparenten Bild
$t_y = 35;  // Startpunkt y auf dem transparenten Bild

imagealphablending($img, true); //  alphablending aktivieren
imagesavealpha($img, true); // alphablending settings speichern
imagettftext($img, $ttfsize, $angle, $t_x, $t_y, $color, $ttf, $text); // Text auf Bild packen
imagepng($img); // Bild erstellen
imagedestroy($img); // Der belegte Zwischenspeicher des Bildes wird wieder freigegeben

Das waren die wichtigsten Einstellungen, an einigen müsst ihr noch eine Feinjustierung vornehmen, z.B. $t_x und $t_y.

Tipps: Ich habe für diese Funktion eine eigene PHP-Datei (bild.php) erstellt, um damit flexibler agieren zu können (Meiner Meinung nach ist es sogar zwingend erforderlich, dies in einer eigenen Datei zu erledigen, da der Header der Datei auf PNG geändert wird). So kann man in der CSS-Datei eine Klasse für das Bild erstellen und per

background-image: url("./bild.php?bild=HalloWelt");

ansteuern. Vergesst an dieser Stelle nicht, die Größe per „width“ und „height“ entsprechend der Größe eures transparenten Bildes anzupassen.

In der bild.php würde dann am Anfang folgendes stehen:

$bild = '';
if ( isset($_POST['bild'])){
$bild = $_POST['bild'];
} else { $bild = $_GET['bild']; }

switch($bild){
case 'HalloWelt':
erzeugeTextAufBild("Hallo Welt", 45);
break;
}

Natürlich lassen sich noch beliebig viele Parameter ergänzen, aber dies dürfte für eine kleine Einführung reichen.

Bei Fragen und Anregungen, könnt ihr mir diese natürlich gerne per Kommentar mitteilen.

Advertisements
Veröffentlicht in PHP. Schlagwörter: , , , , , . Leave a Comment »

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: