Na pewno masz na swojej stronie jakąś grafikę. Mniej lub bardziej skomplikowaną, którą pracowicie przygotowałeś w jednym z wielu programów graficznych. Różne jej elementy składają się na wygląd twojej strony i za każdym razem kiedy internauta ją odwiedza może podziwiać wynik twojej pracy.
o autorach
Michał Paluchowski CEO, właściciel i redaktor vortalu NetHut.pl. Jego ulubionym tygodnikiem jest Wprost, a na co dzień z przyjemnością czyta Gazetę Wyborczą. Jest zakochany w muzyce i komputerach, czasem nieco ekscentryczny. Zawsze otwarty na nowe znajomości.
Łącznie napisał dla nas 45 artykułów.tych samych autorów
- IMAP w stylu PHP [MP]
- Własne RSS [MP]
- Rodzina XSL [MP]
- Wprowadzenie do XML [MP]
- Rozszerzenia XSSI [MP]
zobacz również
Nie wydaje się to trochę nudne? Za każdym razem widzieć tą samą grafikę... Oczywiście podstawowe elementy wyglądu, logo, menu nawigacyjne, wszystko to podlega zasadom użyteczności i nie powinno się co chwila zmieniać. Są jednak elementy, które aż proszą się o ich dynamiczne tworzenie, zależnie od potrzeb.
- wszelkiego rodzaju wykresy, graficznie prezentujące zebrane w innym procesie dane
- tytuły stron w formie graficznej, tworzone po podaniu ich treści, np. pobranych z bazy danych
- wzory matematyczne i napisy w alfabetach, których nie obsługują standardowe czcionki
- także zwiększenie poziomu bezpieczeństwa, poprzez podawanie użytkownikom haseł w formie graficznej
Możliwości są tu naprawdę nieograniczone.
Jeżeli tylko mamy możliwość korzystania z PHP (a w tej chwili jest to bardzo łatwe do osiągnięcia) świat dynamicznie tworzonej grafiki stoi przed nami otworem. Można też do tego wykorzystać Perl, jeżeli dysponujemy modułem GD.pm. W tym artykule ograniczymy się jednak do PHP, w który wbudowane są funkcje dotyczące tworzenia grafiki.
Zakładam, że masz podstawową wiedzę o działaniu i funkcjach PHP. Jeżeli tak nie jest, to generacja grafiki nie jest dla ciebie dobrym początkiem. Jest to dosyć skomplikowane i bardzo pracochłonne, ale czym byłoby życie bez nowych wyzwań?
No to zaczynamy...
Czy leci z nami pilot?
Zanim będziemy mogli cokolwiek stworzyć należy się upewnić czy w ogóle mamy taką możliwość, tzn. czy odpowiednie moduły zostały zainstalowane wraz z PHP.
Będziemy potrzebowali bibliotek GD, FreeType i libjpeg. Z kolei sam GD potrzebuje do działania libpng i zlib.
Jeżeli wynajmujesz miejsce na serwerze to problem ten leży w gestii administratora i do niego należy kierować pytania o dostępność modułów generacji grafiki. Z reguły są one włączone.
Jeżeli kierujesz własnym serwerem opartym o system Windows także problem jest niewielki, ponieważ domyślna instalacja PHP zawiera te moduły już wbudowane. Wystarczy sprawdzić to w pliku php.ini.
Jeśli z kolei masz serwer na innym systemie i wcześniej nie dołączyłeś tych modułów, będziesz musiał ponownie skompilować PHP dopisując do pliku ./configure
--with-gd=/path/to/gd
--with-jpeg-dir=/path/to/libjpeg
--with-zlib-dir=/path/to/zlib
Zakładając oczywiście, że te biblioteki znajdują się na twoim komputerze. W przeciwnym wypadku musisz je ściągnąć.
Jeżeli już wszystko działa, możemy zabrać się za właściwą pracę, czyli generację grafiki.
Nowy obraz
Pierwszym krokiem jest określenie pola, na jakim będziemy tworzyć naszą grafikę. Wykorzystujemy do tego funkcję ImageCreate(), podając jej jako argumenty wielkość obrazka. Taki właśnie obszar zostanie dla niego wyznaczony.
$obraz = ImageCreate(szerokosc, wysokosc);
Funkcja ta tworzy obraz o palecie kolorów ograniczonej do tych, które zdefiniujesz przez kolejną funkcję ImageColorAllocate();. Pierwszy określony w ten sposób kolor stanie się kolorem tła. Funkcja przyjmuje w definicjach kolorów dziesiątkowe wartości RGB i dodatkowo podać należy nazwę zmiennej z obrazkiem:
$kolor1 = ImageColorAllocate($obraz, 255, 24, 150);
Oczywiście nic nie stoi na przeszkodzie, żeby całą paletę zapisać w tablicy zmiennych, np. $kolor[]. Jeżeli koniecznie potrzebujecie obrazka w True Color, bez określonej palety, jest to także możliwe. Wtedy tworzymy na początku obrazek przez funkcję:
$obraz = ImageCreateTrueColor(szerokosc, wysokosc);
Możemy też tworzyć obrazy z już gotowych, jeśli chcemy je np. poddać edycji. Wykorzystujemy wtedy funkcje ImageCreateFrom<format>. Dokładny spis tych funkcji znajdziesz tutaj wraz z innymi informacjami dotyczącymi tworzenia obrazków.
Skoro mamy już określoną paletę kolorów, możemy zacząć tworzyć właściwy rysunek. Do wykorzystania są takie funkcje jak ImageEllipse() czy ImageRectangle() do rysowania elips i prostokątów. Ich stosowanie nie jest skomplikowane a dokładny opis znajduje się w dokumentacji PHP, więc nie ma sensu ich tutaj opisywać.
Gotowe są także funkcje do wstawiania tekstu, ImageTTFText() dla czcionek True Type, ImagePSText() dla czcionek PostScript Type 1. Można tu korzystać z dowolnych czcionek, które znajdują się na serwerze. Za każdym razem należy podać do nich odpowiednią ścieżkę.
I na koniec, kiedy już mamy gotowe wspaniałe dzieło i chcemy je pokazać na stronie, musimy je ostatecznie wygenerować do pliku przez funkcje ImagePNG() lub ImageJPEG(), odpowiednio dla pożądanego formatu. Dodatkowo możemy wygenerować funkcją ImageWBMP() obraz na potrzeby aplikacji WAP. Ze względów licencyjnych, format GIF nie jest dostępny w bibliotekach GD od wersji 1.6 wzwyż. Możesz się dowiedzieć jakie formaty są obsługiwane wpisując funkcję ImageTypes().
Aby taki obrazek umieścić na stronie, wywołujemy go standardowym znacznikiem IMG:
<img src="obrazek.php" width="szerokosc" height="....
Tyle że jako źródło określony jest skrypt.
Żeby nie ograniczać się do suchych formułek, przyjrzyjmy się przykładowi. Będziemy tworzyli obrazek zawierający tytuł artykułu, który będziemy podawali za każdym razem do skryptu.
<?php// Zaczynamy od nagłówka wskazującego typ zawartości, który
// będziemy prezentowali przeglądarceheader("Content-type: image/png");
// Tworzymy nowy obrazek
$obraz = ImageCreate(300, 50);
// WeĽmiemy 3 kolory: biały, czarny i czerwony
$kolor['1'] = ImageColorAllocate($obraz, 255, 255, 255);
$kolor['2'] = ImageColorAllocate($obraz, 0, 0, 0);
$kolor['3'] = ImageColorAllocate($obraz, 255, 0, 0);// Jako tło narysujemy na całej wielkości obrazka wypełniony
// prostokąt o białym tle, podane współrzędne to lewy górny i
// prawy dolny rógImageFilledRectangle($obraz, 0, 0, 300, 50, $kolor['1']);
// Teraz czerwone półkole dla dekoracji
// Pierwsze dwa parametry to współrzędne środka, dwa kolejne to
// szerokość i wysokość, kolejne dwa to początek i koniec półkola
// w stopniach, póĽniej kolor a na końcu styl, w tym przypadku
// standardowy, wypełniony wycinekImageFilledArc($obraz, 25, 25, 40, 40, 180, 360, $kolor['3'], 1);
// Teraz trochę tekstu, przyjmujemy że jest on podany w zmiennej
// $tekst. Pierwszy parametr określa wielkość w pikselach, drugi
// kąt tekstu (0 to normalny, poziomy tekst), dwa kolejne to
// współrzędne lewego, dolnego rogu pierwszego znaku, potem
// skierowanie do pliku z czcionką i na koniec tekst do
// wyświetleniaImageTTFText($obraz, 40, 0, 30, 5, $kolor['2'], "../times.ttf",
$tekst);// Zbieramy wszystko razem
ImagePNG($obraz);
// Zwalniamy zajętą pamięć
ImageDestroy($obraz);
?>
Nie należy zapomnieć o zwolnieniu pamięci na końcu, bo inaczej serwer może nie wytrzymać większej ilości odwołań.
Teraz wystarczy zapisać plik jako tytul.php i wywołać przez:
<img src="tytul.php?tekst=Tytul" width=300 height=50>
I mamy tytuł dla strony.
Edycja grafiki
W poprzednim skrypcie został od początku stworzony nowy obraz. Teraz weĽmiemy gotowy obraz w formacie PNG, zmienimy jego rozmiar i na dole dodamy tekst. Do zmiany rozmiarów wykorzystamy funkcję ImageCopyResized() a potrzebne do pracy wymiary obrazka uzyskamy dzięki funkcji GetImageSize(). Ta ostatnia tworzy czteroczęściową tablicę: szerokość, wysokość, typ obrazka i wyrażenie "height=Y width=X", gotowe do wstawienia np. do znacznika IMG.
Oto kod skryptu:
<?php// Przyjmijmy, że nazwa starego obrazka znajduje się w zmiennej
// $stary_plik$rozmiar = GetImageSize($stary_plik);
$stary = ImageCreateFromPNG($stary_plik);
// Zmniejszymy jego rozmiar o 1/3, zobaczmy ile to będzie
$nowa_szerokosc = round($rozmiar['0'] / 3 * 2);
$nowa_wysokosc = round($rozmiar['1'] / 3 * 2);// Otwieramy nowy obrazek i nadajemy mu czarne tło
$nowy = ImageCreate($nowa_szerokosc, $nowa_wysokosc);
$czarny = ImageColorAllocate($nowy, 0, 0, 0);
// Kopiujemy nowy obrazek
// Określamy kolejno cel, Ľródło, współrzędne lewego, górnego
// roku celu i Ľródła, oraz szerokość i wysokość celu i Ľródła
// Jeśli wymiary różnią się między Ľródłem a celem, dokonane
// będzie przeskalowanieImageCopyResized($nowy, $stary, 0, 0, 0, 0, $nowa_szerokosc,
$nowa_wysokosc, $rozmiar['0'], $rozmiar['1']);// Pozbywamy się starego obrazka
ImageDestroy($stary);
// Wstawiamy tekst
// Liczba dwa określa jedną z 5 wbudowanych czcionek, można też
// dodać własne funkcją ImageLoadFont(). Wstawiamy to w dolnym,
// lewym rogu obrazkaImageString($nowy, 2, 5, $nowa_wysokosc - 5, "Copyright 2002",
$czarny);// No to wyświetlamy
header("Content-type: image/png");
ImagePNG($nowy);
ImageDestroy($nowy);
?>
Tak właśnie wygląda dynamiczne tworzenie obrazków przy pomocy PHP. Oczywiście, żeby te obrazki były naprawdę dynamiczne trzeba odpowiednio zorganizować podawanie zmiennych przy ich tworzeniu, co pozwoli generować np. efektowne wykresy czy tytuły.