Text do PNG – czyli jak korzystać z GD2

komputerek_phpBiblioteka GD2 to jedno z ciekawszych narzędzi, które są dostępne w PHP znacznie poszerzając jego możliwości. Od dłuższego czasu biblioteka ta jest dostępna w ramach prawie każdego hostingu oferowanego na rynku. Warto więc zapoznać się z możliwościami GD2, gdyż jego znajomość pozwala na wykonywanie bardzo ciekawych operacji. Z bardziej popularnych można wymienić choćby takie, jak: skalowanie rozmiaru pliku graficznego, tworzenie zupełnie nowych obrazów, zmiana typu pliku, konwersja koloru do przeźroczystości, nakładanie napisów na zdjęcia, odczyt danych EXIF … i wiele, wiele innych.

Jednym z popularnych zadań jakie może realizować GD to konwersja tekstu do pliku graficznego. Poniżej znajdziecie przykładowy listing w którym przestawiam realizację takiej operacji. Oczywiście należy potraktować ten kod bardziej jako przykład możliwości niż samo rozwiązanie tego zagadnienia.

<?php
header('Content-Type: image/png');

$text = intval($_GET['text']);

switch ($text) {
case 1:
$text = 'text1';
break;
case 2:
$text = 'text2';
break;
case 3:
$text = 'text3';
break;
default:
$text = 'text0';
break;
}

$im = imagecreatetruecolor(100, 30);

$bg_color = imagecolorallocate($im, 255, 255, 255);
$shadow_color = imagecolorallocate($im, 128, 128, 128);
$tekst_color = imagecolorallocate($im, 140, 20, 20);

imagefilledrectangle($im, 0, 0, 99, 29, $bg_color);

putenv('GDFONTPATH=' . realpath('.'));
$font='arial.ttf';

imagettftext($im, 20, 0, 14, 26, $shadow_color, $font, $text);
imagefilter($im, IMG_FILTER_SMOOTH, 1);
imagettftext($im, 20, 0, 12, 24, $tekst_color, $font, $text);

imagepng($im);
imagedestroy($im);
?>

Omawianie początkowego kodu zawierającego definicję tekstów poddawanych konwersji pomijam, właściwe wykorzystanie GD2 rozpoczyna się na etapie tworzenia zasobu zawierającego obrazek. Za działanie to odpowiada funkcja: imagecreatetruecolor(). Argumenty tej funkcji to szerokość oraz wysokość utworzonego obrazka. Funkcja zwraca identyfikator zasobu lub „false” w przypadku błędnego działania. Utworzony obrazek będzie miał założone wymiary oraz zostanie wypełniony czarnym kolorem.

W kolejnym kroku definiowane są kolory przypisane do utworzonego obrazka. Operację tę realizuje funkcja imagecolorallocate(resource $image , int $red , int $green , int $blue ). Argumenty tej funkcji to: $image – identyfikator zasobu, $red – poziom wartości koloru czerwonego 0-255, $blue – poziom wartości koloru niebieskiego 0-255, $green – poziom wartości koloru zielonego 0-255. Jeśli zależy Wam aby przypisany kolor odpowiadał konkretnej barwie, to w celu uzyskania wartości jego składowych w przestrzeni barw RGB, najlepiej skorzystać z jednego z programów graficznych (GIMP, Photoshop) lub innego narzędzia, gdzie możecie podejrzeć te wartości.

Tak jak pisałem wcześniej, utworzony obrazek będzie w całości wypełniony czarnym kolorem. Korzystając w funkcji imagefilledrectangle() wypełnimy go w całości białym kolorem. Funkcja ta ma następujące argumenty: resource $image – identyfikator zasobu , int $x1 – wartość współrzędnej x punktu początkowego , int $y1 – wartość współrzędnej y punktu początkowego  , int $x2 – wartość współrzędnej x punktu końcowego, int $y2  – wartość współrzędnej y punktu końcowego, int $color – identyfikator koloru wykorzystanego do wypełnienia. Warto zwrócić uwagę, że wartości współrzędnych punktu początkowego i końcowego operują od 0, co oznacza że w przypadku naszego obrazka zakres wartości x mieści się w przedziale <0,99> a współrzędnej y w przedziale <0,29>.

Kolejna operacja jaką musimy wykonać, to podanie miejsca w którym znajdują się kroje czcionek jakie chcemy wykorzystać przy pomocy biblioteki GD2. Za wykonanie tej operacji odpowiada funkcja putenv('GDFONTPATH=' . realpath('.')). Wynikiem działania tej funkcji jest przypisanie danej wartości do zmiennej środowiskowej serwera. Warto zauważyć, że wykonane działanie ma jedynie zasięg lokalny i jest widoczne jedynie dla danego skryptu PHP w którym funkcja została użyta. W naszym przypadku do zmiennej środowiskowej GDFONTPATH została przypisana wartość funkcji realpath('.'), czyli ścieżka do bieżącego katalogu w którym znajduje się skrypt. W przypadku, gdy plik z krojem czcionki znajduje się w innym katalogu, musicie wskazać poprawny adres do właściwego  katalogu.

W kolejnym kroku utworzymy cień do napisu. Budując tego typu obrazki musicie rozdzielić je na poszczególne warstwy składowe, które będą tworzone w odpowiedniej kolejności. Cień znajduje się nad tłem ale pod finalnym tekstem, więc musi być on utworzony między tymi warstwami.

Do transformacji tekstu na obraz posłużymy się funkcją imagettftext(). Funkcja ta ma następujące argumenty: $image – identyfikator zasobu , $size – wielkość textu , $angle – kąt pod jakim tekst będzie pisany , $x – wartość współrzędnej x początkowego punktu , $y – wartość współrzędnej y punktu , $color  – identyfikator koloru, $fontfile – ścieżka do pliku z krojem czcionki , $text – tekst przeznaczony do konwersji. W celu uzyskania bardziej rzeczywistego wyglądu cienia, stosując funkcję imagefilter($im, IMG_FILTER_SMOOTH, 1) – wykonamy rozmycie obrazka. Oczywiście rozmycie będzie dotyczyły bieżącego stanu w jakim znajduje się grafika, zastosowanie filtru nie ma wpływu na kolejne warstwy i efekty stosowane na dany obrazek.

Korzystając znów z funkcji imagettftext() dodamy właściwy tekst, który będzie przesunięty o 2 piksele w górę i w lewo w stosunku do cienia. W ostatnim kroku z uzyskanego zasobu $im uzyskamy finalny obrazek w postaci PNG. Działanie to realizowane jest za pośrednictwem polecenia imagepng($im). Na samym końcu niszczymy utworzony zasób $im – imagedestroy($im).

Wywołanie w przeglądarce pliku zawierającego powyższy kod, spowoduje wyświetlenie się utworzonego obrazka. Warto zauważyć, że w przypadku gdy nie prześlemy w nagłówku informacji o formacie pliku – header('Content-Type: image/png'); – po wywołaniu pliku w w oknie przeglądarki plik będzie prezentowany jako plik tekstowy a nie plik graficzny. Mam nadzieję że zachęciłem Was do nauki i zabawy z biblioteką GD2.

Znaczniki: ,

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *


8 + dziewięć =

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>