7. Dynamiczne generowanie grafiki



Podobne dokumenty
8. Dynamiczne generowanie grafiki, cz. 2

Grafika PHP dla początkujących

Cechy formatu PNG Budowa bloku danych Bloki standardowe PNG Filtrowanie danych przed kompresją Wyświetlanie progresywne (Adam 7)

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

FORMATY PLIKÓW GRAFICZNYCH

ROZSZERZANIE MOŻLIWOŚCI...

PAMIĘĆ OPERACYJNA...107

Generated by Foxit PDF Creator Foxit Software For evaluation only. System Szablonów

WAŻNE! colour.me Google Fonts tutaj

Grafika w aplikacjach lp. Jak zmienić kolor tła?

4. Pliki Informacje ogólne o dostępie do plików w PHP Sprawdzanie istnienia pliku file_exists()

Zbieranie kontaktów.

Grafika rastrowa (bitmapa)-

SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. ł ęść. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,

ECDL/ICDL Edycja obrazów Moduł S4 Sylabus - wersja 2.0

Specyfikacja reklamy tekstowej i bannerowej na portalu GazetaPraca.pl

Generatory pomocy multimedialnych

GRAFIKA RASTROWA. WYKŁAD 1 Wprowadzenie do grafiki rastrowej. Jacek Wiślicki Katedra Informatyki Stosowanej

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Palety by CTI. Instrukcja

Jak posługiwać się edytorem treści

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Podstawy technologii WWW

Część II Wyświetlanie obrazów

Cała prawda o plikach grafiki rastrowej

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

Kraków, ver

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

1 LEKCJA. Definicja grafiki. Główne działy grafiki komputerowej. Programy graficzne: Grafika rastrowa. Grafika wektorowa. Grafika trójwymiarowa

Formaty plików graficznych

Projektowanie graficzne. Wykład 2. Open Office Draw

Kurs WWW. Paweł Rajba.

,Aplikacja Okazje SMS

SPIS TREŚCI: PODSTAWY...19 PIERWSZE KROKI WORKBENCH PAMIĘĆ OPERACYJNA 123 DYSK SYSTEMOWY 129 URZĄDZENIA 137

WYŚWIETLACZE GRAFICZNE MAX

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)

RAMOWY HARMONOGRAM SZKOLENIA

Kolory elementów. Kolory elementów

ECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5

Lekcja 10. Uprawnienia. Dołączanie plików przy pomocy funkcji include() Sprawdzanie, czy plik istnieje przy pmocy funkcji file_exists()

ibok Internetowe Biuro Obsługi Klienta

Inkscape. Menu. 1 SVG (ang. Scalable Vector Graphics) uniwersalny format dwuwymiarowej, statycznej i

GRAFIKA SIECIOWA. WYKŁAD 2 Optymalizacja grafiki. Jacek Wiślicki Katedra Informatyki Stosowanej

Formaty obrazów rastrowych biblioteki PBM

C Biblioteka G2. C.1 Koncepcja biblioteki G2.

CPT-CAD - Program do tworzenia dokumentacji geologicznej i geotechnicznej

Zasady ekspozycji i reprodukcji znaku

B Biblioteka GD. B.1 Koncepcja biblioteki GD.

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

SPECYFIKACJA TECHNICZNA PRODUKTÓW REKLAMOWYCH SIECI LOCAL POWER. Specyfikacja ważna od 21 maja 2018 r.

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

która metoda jest najlepsza

6. Bezpieczeństwo przy współpracy z bazami danych

Spis treści. Informacyjna Agencja Samorządowa tel.: , 2/5

Wizualne systemy programowania. Wykład 11 Grafika. dr Artur Bartoszewski -Wizualne systemy programowania, sem. III- WYKŁAD

Formaty plików graficznych

Programowanie CGI. Jolanta Bachan Informatyka

WYŚWIETLACZE GRAFICZNE 3-KOLOROWE wewnętrzne

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

FARA INTENCJE ONLINE. Przewodnik dla użytkownika programu FARA. Włodzimierz Kessler SIGNUM-NET

Formaty plików graficznych

INTERAKTYWNA KOMUNIKACJA WIZUALNA. Flash - podstawy

Specyfikacja techniczna

Szczegółowa specyfikacja funkcjonalności zamawianego oprogramowania.

I. Program II. Opis głównych funkcji programu... 19

Warunki techniczne prezentacji reklam

Pokaz slajdów na stronie internetowej

Ikona aplikacji. Ikona aplikacji to grafika wyświetlająca się na ekranie ipada. Służy do uruchomienia aplikacji Salesbook.

I. Informacje ogólne. Jednym z takich systemów jest Mambo.

WYŚWIETLACZE WEWNĘTRZNE. GRAFICZNO-TEKSTOWE Tekst

Ćwiczenie 1 Automatyczna animacja ruchu

HARMONOGRAM SZKOLENIA ECDL moduł S4 - edycja obrazów

Rodzaje plików. Podstawowe definicje.

HARMONOGRAM SZKOLENIA ECDL moduł S4 - edycja obrazów

Materiały dla studentów pierwszego semestru studiów podyplomowych Grafika komputerowa i techniki multimedialne rok akademicki 2011/2012 semestr zimowy

SPECYFIKACJA FORM REKLAMOWYCH

URL:

Dynamiczne. generowanie. dokumentów PDF. Michał Dudkiewicz. V Konferencja Informatyka w Edukacji 3-6 lipca 2008

WYŚWIETLACZE GRAFICZNE. Raster 20 mm. Sterowanie PC - LAN/PENDRIVE/WiFi/Pilot. Polski producent Wysoka jakość Energooszczędność

Spis treści. 1 Moduł Mapy 2

Sieci komputerowe. Wykład 7: Warstwa zastosowań: DNS, FTP, HTTP. Marcin Bieńkowski. Instytut Informatyki Uniwersytet Wrocławski

Ćwiczenie: JavaScript Cookies (3x45 minut)

Specyfikacja techniczna produktów reklamowych serwisów Trader.com (Polska)

Kompresja obrazów i formaty plików graficznych

GRAFIKA RASTROWA. WYKŁAD 2 Oprogramowanie i formaty plików. Jacek Wiślicki Katedra Informatyki Stosowanej

Z życia grafika-webmastera

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Instrukcja obsługi szablonów aukcji

UWAGA!!! Przed przystąpieniem do zamknięcia roku proszę zrobić kopie bezpieczeństwa

Jarosław Kuchta Administrowanie Systemami Komputerowymi. Internetowe Usługi Informacyjne

Tworzenie wiadomości Newsletter

Formatowanie warunkowe

Smarty PHP. Leksykon kieszonkowy

Zadanie programistyczne nr 3 z Sieci komputerowych

Budowa systemów komputerowych

WYŚWIETLACZE GRAFICZNE MAX

Transkrypt:

7. Dynamiczne generowanie grafiki 7.1. Biblioteka GD Dynamiczne generowanie kodu HTML to podstawowe zastosowanie języka PHP. Często jednak to nie wystarczy i mieszanka: dynamiczny HTML plus statyczna grafika, okazuje się za słaba. Dlatego PHP można opcjonalnie wyposażyć w moduł umożliwiający programowe tworzenie grafiki, a następnie wyemitowanie jej do przeglądarki w powszechnie przyjętym formacie JPEG, PNG czy GIF. Moduł ten korzysta z biblioteki GD (http://www.boutell.com/gd/). Standardowo PHP4 nie jest kompilowane z GD, musi to zrobić sam administrator, dodatkowo GD może obsługiwać (lub nie) czcionki wektorowe w formacie TrueType, za pośrednictwem biblioteki FreeType. Grafikę w GD możemy generować bądź to zaczynając od pustego obrazka, bądź też ładując jakąś gotową grafikę i dokonując na niej manipulacji. Repertuar biblioteki obejmuje podstawowe funkcje graficzne (punkty, linie, wielokąty, elipsy), generację tekstu (szczególnie ładnie wygląda wygładzany tekst generowany z wektorowych czcionek TrueType), operacje na blokach obrazu, skalowanie, filtry i inne. Gotowy obrazek można wysłać do przeglądarki, można też go przechować na dysku. Biblioteka umożliwia tworzenie zarówno obrazków paletowych (mała ilość kolorów, ale też małe rozmiary pliku), jak i obrazków w pełnym kolorze (24 bity RGB).

7.2. Sprawdzenie możliwości graficznych Ze względu na opcjonalność samej biblioteki GD, jak i jej wielu komponentów, istnieje w PHP funkcja gd_info() pozwalająca na zbadanie istnienia i możliwości GD w instalacji PHP, na której wykonywany jest skrypt. Wynikiem działania tej bezparametrowej funkcji jest tablica asocjacyjna prezentująca wersję i możliwości modułu dynamicznej generacji grafiki. 'GD Version' 'Freetype Support' 'Freetype Linkage' 'T1Lib Support' 'GIF Read Support' 'GIF Create Support' 'JPG Support' 'PNG Support' 'WBMP Support' 'XBM Support' łańcuch tekstowy opisujący wersję biblioteki wartość logiczna określa obsługę czcionek TrueType rodzaj biblioteki obsługującej czcionki TT (FreeType 1/2) wartość logiczna obsługa czcionek PostScript typ 1 wartość logiczna odczyt obrazków GIF wartość logiczna zapis obrazków GIF wartość logiczna zapis/odczyt obrazków JPEG wartość logiczna zapis/odczyt obrazków PNG wartość logiczna zapis/odczyt obrazków WBMP wartość logiczna zapis/odczyt obrazków NetPBM Z gd_info() warto korzystać pisząc kod przenośny między różnymi serwerami, w przypadku braku którejś z funkcji można dzięki niej szybko zdiagnozować problem.

7.3. Emitowanie grafiki Skrypt PHP generujący obrazek różni się od skryptu generującego stronę w HTML. Przede wszystkim nie jest to dokument HTML, zatem pozbawiony jest całkowicie nagłówka. Dlatego kod generujący obrazek nigdy nie zaczyna się od <HTML>, to spowodowałoby wygenerowanie nagłówka odpowiedzi HTTP z typem zawartości text/html co na pewno nie jest dobrym typem MIME dla obrazka. Dlatego od razu, w pierwszej linii, startujemy z kodem PHP. Niemniej jakiś nagłówek trzeba wygenerować, minimum to wymagane pole Content-Type. Ze skryptu wysyłamy je w sposób następujący: <? header('content-type: image/png'); Oczywiście jeżeli docelowym formatem jest JPEG lub GIF, odpowiednio modyfikujemy zawartość pola. Po załatwieniu sprawy nagłówka, rozpoczynamy pracę z grafiką od stworzenia czystego bufora, bądź załadowania obrazka z pliku (o czym dalej). Następnie dokonujemy na obrazku wszelakich manipulacji. W momencie, gdy jest gotowy, wysyłamy go do przeglądarki funkcją imagepng(), imagejpeg(), czy też imagegif(). Ten ostatni format nie jest generalnie zalecany. Dopiero jedna z tych funkcji powoduje wysłanie danych obrazka do przeglądarki. Bardzo ważną sprawą jest wyłączenie komunikatów o błędach we wszystkich funkcjach, które takie mogą zgłosić. W przeciwnym wypadku komunikat wmiesza się w binarne dane obrazka, powodując jego uszkodzenie. Komunikaty o błędach wyłączamy używając operatora @.

7.4. Tworzenie czystego obrazka - imagecreate() Jeżeli pracę z obrazem zaczynamy od zera, musimy najpierw stworzyć powierzchnię do rysowania. Służą do tego dwie funkcje: imagecreate() tworzy bufor do pracy z paletą kolorów, oraz imagecreatetruecolor(), tworząca bufor dla obrazka 24-bitowego: $obraz = @imagecreate(szerokosc, wysokosc); $obraz24 = @imagecreatetruecolor(szerokosc, wysokosc); Obie funkcje zwracają wartość typu zasób, której używamy później jako identyfikatora obrazu. Po zakończeniu rysowania obrazu, oraz wyemitowaniu go do przeglądarki, można zniszczyć bufor roboczy funkcją imagedestroy(). Jeżeli tego nie zrobimy, bufor zostanie zniszczony automatycznie przy wyjściu ze skryptu. imagedestroy($obraz); 7.5. Ładowanie obrazka z pliku Bardzo często umieszczamy naszą grafikę na jakimś gotowym tle. Najprościej w takim wypadku stworzyć bufor do rysowania z załadowanego z dysku obrazka, przy pomocy zestawu funkcji: createimagefromgif(), createimagefrompng(), createimagefromjpeg(). Parametrem tych funkcji jest ścieżka do pliku z obrazkiem, jeżeli włączone jest traktowanie zasobów HTTP jako plików, to ścieżka może być adresem URL. Powstały bufor z obrazkiem ma takie rozmiary jak oryginał, rodzaj (paleta/truecolor) również zależy od obrazka.

7.6. Więcej o emitowaniu obrazka Funkcje emitujące obrazek posiadają możliwość przekierowania obrazka z przeglądarki klienta do lokalnego pliku na serwerze. Oprócz tego imagejpeg() pozwala na regulację jakości obrazka (siły kompresji) od 0 (najgorsza jakość) do 100 (najlepsza jakość). Domyślną jakością obrazka JPEG jest 75. Oto przykłady: imagepng($obrazek, '/home/user/public_html/obrazki/ob1.png'); imagejpeg($obrazek, 'ob2.jpg', 90); Jeżeli chcemy podregulować jakość obrazka JPEG wysyłanego do przeglądarki, po prostu pomijamy drugi parametr: imagejpeg($obrazek,, 45); Niektóre formaty (PNG przede wszystkim) pozwalają na progresywne wyświetlanie obrazka. GD umożliwia na wykorzystanie tej cechy przy pomocy funkcji imageinterlace(), którą możemy włączyć dla danego obrazka progresywność: imageinterlace($obrazek, 1); Oczywiście włączanie i wyłączanie progresywności w czasie rysowania nie ma znaczenia. Liczy się stan tego ustawienia w momencie wykonywania emisji obrazka. Warto pamiętać, że progresywność zwiększa czas emisji obrazka i jego rozmiar w bajtach.

7.7. Rysowanie i kolory Przed narysowaniem czegokolwiek jakimś kolorem, trzeba sobie ten kolor zarezerwować (również przy obrazkach 24-bitowych, różnica jest taka, że na obrazku takim można mieć praktycznie nieograniczoną ilość kolorów, na obrazku paletowym ilość kolorów wynika z wielkości palety). Do przydziału kolorów służy funkcja imagecolorallocate(): $kolor = imagecolorallocate($obrazek, r, g, b); Wynikiem jest numer koloru używany dalej przy rysowaniu. Na obrazkach paletowych funkcja ta może zwrócić -1, jeżeli wykorzystamy wszystkie kolory z palety. Zarezerwowane kolory można zwalniać funkcją imagecolordeallocate(): imagecolordeallocate($obrazek, $kolor); Pozostawienie niezwolnionych kolorów nie niesie ze sobą żadnyck konsekwencji, zostaną automatycznie zwolnione przy usuwaniu bufora. Pierwsze wywołanie tej funkcji dla danego obrazka ustawia mu kolor tła, jeżeli obrazek jest w trybie paletowym (obrazki 24-bitowe mają zawsze czarne tło).

7.8. Rysowanie: pojedyncze piksele imagesetpixel($obrazek, x, y, $kolor); (0, 0) x y $kolor to numer koloru otrzymany z imagecolorallocate().

7.9. Rysowanie: linie imageline($obrazek, x1, y1, x2, y2, $kolor); (0, 0) x1 x2 y2 y1 $kolor to numer koloru otrzymany z imagecolorallocate().

7.10. Rysowanie: prostokąty imagerectangle($obrazek, x1, y1, x2, y2, $kolor); (0, 0) x1 y1 x2 y2 $kolor to numer koloru otrzymany z imagecolorallocate().

7.11. Rysowanie: wypełnione prostokąty imagefilledrectangle($obrazek, x1, y1, x2, y2, $kolor); (0, 0) x1 y1 x2 y2 $kolor to numer koloru otrzymany z imagecolorallocate().

7.12. Rysowanie: elipsy imageellipse($obrazek, x, y, w, h, $kolor); (0, 0) x x2 y h w $kolor to numer koloru otrzymany z imagecolorallocate().

7.13. Rysowanie: wypełnione elipsy imagefilledellipse($obrazek, x, y, w, h, $kolor); (0, 0) x x2 y h w $kolor to numer koloru otrzymany z imagecolorallocate().

7.14. Rysowanie: wielokąty $ile = 3; $wierzcholki = array(x0, y0, x1, y1, x2, y2); imagepolygon($obrazek, $wierzcholki, $ile, $kolor); (0, 0) x0, y0 x1, y1 x2, y2 $wierzcholki to tablica zawierająca jako kolejne elementy współrzędne x i y wierzchołków Wielokąt jest automatycznie zamykany linią od ostatniego do pierwszego wierzchołka. $kolor to numer koloru otrzymany z imagecolorallocate().

7.14. Rysowanie: wypełnione wielokąty $ile = 3; $wierzcholki = array(x0, y0, x1, y1, x2, y2); imagefilledpolygon($obrazek, $wierzcholki, $ile, $kolor); (0, 0) x0, y0 x1, y1 x2, y2 $wierzcholki to tablica zawierająca jako kolejne elementy współrzędne x i y wierzchołków Wielokąt jest automatycznie zamykany linią od ostatniego do pierwszego wierzchołka. $kolor to numer koloru otrzymany z imagecolorallocate().

7.14. Rysowanie: fragmenty łuków imagearc($obrazek, x, y, w, h, s, e, $kolor); (0, 0) x x2 e y h s w $kolor to numer koloru otrzymany z imagecolorallocate(). Kąty s i e są liczone w stopniach, zawsze w kierunku ruchu wskazówek zegara.

7.15. Rysowanie: fragmenty elips imagefilledarc($obrazek, x, y, w, h, s, e, $kolor); (0, 0) x x2 e y h s w $kolor to numer koloru otrzymany z imagecolorallocate(). Kąty s i e są liczone w stopniach, zawsze w kierunku ruchu wskazówek zegara.