[PHP][GD2] Używanie czcionek TrueType

Standardowa czcionka używana do tworzenia tekstu za pomocą imagestring() łagodnie rzecz ujmując pozostawia wiele do życzenia, warto zatem wiedzieć, że za pomocą biblioteki GD można "pisać" po obrazie dowolną czcionką. Czcionek w internecie znajdziemy multum, wybór ograniczony jest tutaj jedynie wyobraźnią.

Co najlepsze - dołączenie zewnętrznej czcionki nie wymaga w GD jakiś specjalnych zabiegów - wszystko sprowadza się do pobrania pliku .ttf z zadaną czcionką TrueType, umieszczeniu go na serwerze, a następnie dołączeniu go do skryptu. W tym bardzo krótkim wpisie pokażę jak za pomocą kilku linijek kodu wygenerować efekt taki jak na obrazku poniżej:

Czcionka na powyższym obrazku została dołączona za pomocą PHP, nie została dodana w żadnym programie graficznym. Nazywa się Nasty i możecie ją pobrać stąd. Zdjęcie na jakim wygenerowano napis stąd. Opiszę teraz w skrócie jak za pomocą zewnętrznej czcionki wygenerować na obrazie napis jak wyżej. Na początek pobierzmy sobie tą czcionkę (plik .ttf) w celach testowych i zapiszmy w katalogu, gdzie pisać będziemy nasz kod. Do pisania czcionką TrueType, którą załączamy z zewnetrznego pliku .ttf służy funkcja:

imagettftext($image, $font_size, $angle, $x, $y, $color, $font, $text);

gdzie:

• $image - uchwyt do obrazu
• $font_size - rozmiar czcionki w px
• $angle - kąt obrotu czcionki w stopniach
• $x - współrzędna X, od której zaczynamy pisanie
• $y - współrzędna Y, od której zaczynamy pisanie
• $color - kolor czcionki
• $font - nazwa pliku z czcionką
• $text - pisany tekst

Zobaczmy na przykładzie:

<?php
 
$image = imagecreatefromjpeg("angelina.jpg");
 
$white = imagecolorallocate($image, 255, 255, 255);
 
$black = imagecolorallocate($image, 0, 0, 0);
 
 
 
$font = 'nasty.ttf';
 
$txt = 'ANGELINA';
 
$x = 400;
 
$y = 350;
 
$size = 90;
 
$angle = 0;
 
 
 
imagettftext($image, $size, $angle, $x+1, $y+1, $black, $font, $txt); // +1px w dół, +1px w prawo
 
imagettftext($image, $size, $angle, $x-1, $y-1, $black, $font, $txt); // -1px w górę, -1px w lewo
 
imagettftext($image, $size, $angle, $x, $y, $white, $font, $txt);
 
 
 
header('Content-type: image/png'); 
 
ImagePNG($image); 
 
imagedestroy($image); 
 
?>

Powyższy kod wygeneruje dokładnie taki sam efekt jak na załączonym obrazku.
Ot cała filozofia.

Warto jednak zwrócić uwagę na fakt, iż tekst jest tutaj tworzony aż trzy razy. Dlaczego? Otóż właściwym tekstem jest ten o kolorze białym, tekst pisany czcionką czarną robi tutaj za obramowanie i jest przesunięty pod spodem o jeden pixel najpierw w górę, potem w dół, a także o jeden pixel na boki.

Powodem zastosowania takiej konstrukcji jest to, że w bibliotece GD do pisania daną czcionką można użyć jednocześnie tylko jednego koloru, tym samym czcionka nie posiada tutaj żadnego widocznego konturu, co na niekontrastowym tle może powodować problem z widocznością. Rozwiązanie takie jak powyżej pozwala wyeliminować tą niedogodność i umożliwia nam uzyskanie czegoś w stylu efektu cienia, bądż konturu dla wyświetlanego tekstu.