środa, 27 maja 2015

[PHP][GD2] Podstawy generowania grafiki

TRUE
5540378502607286314
Biblioteka GD2 wbudowana w PHP to bardzo rozbudowane narzędzie, pozwalające na generowanie właściwie każdego rodzaju grafiki bitmapowej. Dzięki niej możemy generować grafikę bezpośrednio z poziomu PHP, co za tym idzie również manipulować istniejącą grafiką zapisaną w plikach takich jak JPEG, PNG, czy BMP, a więc tworzyć różnego rodzaju miniaturki, skalować i obracać zdjęcia, nakładać "w locie" filtry, znaki wodne, bądź napisy z zewnętrznych czcionek TrueType.

Biblioteka ta nadaje się również świetnie do generowania wszelkiego rodzaju graficznych wykresów reprezentujących dane pobrane bezpośrednio z PHP. Wygenerowane grafiki możemy następnie wyświetlać bezpośrednio do przeglądarki, albo zapisywać do plików. W artykule tym nauczymy się podstawowej zasady działania biblioteki i dowiemy się w jaki sposób wykorzystywać ją w kodzie.

1. Tworzymy pusty obrazek - imagecreatetruecolor()

Pierwszą podstawową rzeczą podczas pracy z GD2 jest stworzenie uchwytu do obrazka. Każda zabawa z GD2 rozpoczyna się od tego. Będziemy operować na pełnej palecie barw, więc nasz obrazek będziemy tworzyć za pomocą funkcji:

  1. $image = imagecreatetruecolor(szerokość_obrazka, wysokość_obrazka)


Jak widać za jedyne argumenty pobiera ona wysokość oraz szerokość generowanego przez nas obrazu. Stwórzmy nasz pierwszy obrazek:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11. ?>
  12.  

Obrazek nasz zapisaliśmy do zmiennej $image, na której to zmiennej będziemy następnie dokonywać wszystkich zwiazanych z nim operacji. Mamy więc pusty obrazek, który jednak narazie jest jedynie zasobem w pamięci operacyjnej serwera, nic tutaj narazie się nam jeszcze na ekranie nie wyświetli.
Na początek dodajmy mu trochę koloru, wypełnijmy go całego np. kolorem czerwonym.

Do stworzenia obrazu o zwykłej palecie barw służy natomiast funkcja:

  1. $image = imagecreate(szerokość_obrazka, wysokość_obrazka)

2. Definiujemy kolor - imagecollorallocate()

Wartość danego koloru musimy najpierw zdefiniować za pomocą funkcji:

  1. $color = imagecolorallocate($image, R, G, B)

gdzie jako pierwszy parametr podajemy uchwyt do utworzonego wcześniej obrazka, a następnie kolejno wartości RGB tworzonego koloru (z zakresu 0-255).

2.5. Definiujemy kolor z kanałem alpha - imagecollorallocatealpha()

Możemy także stworzyć kolor z wartością kanału alpha, a więc z przezroczystością, używamy do tego funkcji:

  1. $color = imagecolorallocatealpha($image, R, G, B, Alpha)

gdzie jako dodatkowy parametr podajemy wartość kanału alpha (z zakresu 0-127)

My chcemy stworzyć kolor czerwony, wywołamy więc funkcję z następującymi argumentami, przy czym zapiszemy sobie nasz kolor do zmiennej $red:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $red = imagecolorallocate($image, 255, 0, 0);
  14.  
  15. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
  16.  
  17. ?>
  18.  

3. Wypełniamy obrazek kolorem - imagefill()

Mamy już zdefiniowaną wartość koloru, czas aby wypełnić nasz obrazek tym właśnie kolorem, służy do tego funkcja:

  1. imagefill($image, $x, $y, $color)

gdzie jako pierwszy argument podajemy uchwyt do obrazka, następnie:

  • $x - punkt początkowy w osi X od którego zaczynamy wypełnianie kolorem
  • $y - punkt początkowy w osi Y od którego zaczynamy wypełnianie kolorem
  • $color - wartość koloru wypełnienia utworzona uprzednio za pomocą imagecollorallocate()

My chcemy wypełnić cały obrazek, a więc cały obszar o wielkości 400x300px, jako początkowe współrzędne podamy więc wartości zerowe, a kolorem jakim wypełniamy będzie nasz czerwony:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $red = imagecolorallocate($image, 255, 0, 0);
  14.  
  15. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
  16.  
  17.  
  18.  
  19. imagefill($image, 0, 0, $red);
  20.  
  21. // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $red
  22.  
  23. ?>
  24.  

4. Generujemy obrazek - imagepng(), imagejpeg(), imagegif()

Dla sprawdzenia wyniku wyświetlmy teraz obrazek bezpośrednio w przeglądarce.
Służy do tego kilka funkcji, w zależności od tego jakiego typu obrazek chcemy wyrzucić na ekran:

  1. imagepng($image); - wyświetla nasz obrazek w formacie PNG
  2.  
  3. imagejpeg($image); - wyświetla nasz obrazek w formacie JPEG
  4.  
  5. imagebmp($image); - wyświetla nasz obrazek w formacie Windows BMP
  6.  
  7. imagegif($image); - wyświetla nasz obrazek w formacie GIF
  8.  


Aby jednak wyświetlić obrazek, musimy najpierw wysłać do przeglądarki nagłówek informujący o typie naszego obrazu. Dokonujemy tego za pomocą ustawienia odpowiedniego Mime-Type:

  • PNG -  image/png
  • JPEG - image/jpeg
  • BMP -  image/bmp
  • GIF - image/gif

Wyświetlmy nasz obrazek jako PNG:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $red = imagecolorallocate($image, 255, 0, 0);
  14.  
  15. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
  16.  
  17.  
  18.  
  19. imagefill($image, 0, 0, $red);
  20.  
  21. // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $red
  22.  
  23.  
  24.  
  25. header("Content-type: image/png");
  26.  
  27. // definiujemy nagłówek z mimetype
  28.  
  29.  
  30.  
  31. imagepng($image);
  32.  
  33. // generujemy obrazek PNG
  34.  
  35.  
  36.  
  37. imagedestroy($image);
  38.  
  39. // zwalniamy uchwyt do obrazka
  40.  
  41. ?>
  42.  


W tym momencie powinien nam się wyświetlić piękny czerwony prostokąt o wymiarach 400x300px (wymiary na obrazku dodałem oddzielnie, wy zobaczycie jedynie czerwony prostokąt):


Pamiętajmy, że po wygenerowaniu grafiki zwalniamy zasób za pomocą:

  1. imagedestroy($image);


Warto też tutaj przyjrzeć się funkcji:

  1. imagefill()

Otóż - niezależnie jakie w tym momencie podamy koordynaty x i y, to obrazek zostanie wypełniony danym kolorem w całości.

5. Wypełniamy kolorem obszar - imagefilledrectangle()

Aby wypełnić jedynie zadany przez nas prostokątkny obszar, musimy skorzystać z funkcji:

  1. imagefilledrectangle($image, $x1, $y1, $x2, $y2, $red);

gdzie:

  • $x1 - punkt początkowy na osi X
  • $y1- punkt początkowy na osi Y
  • $x2 - punkt końcowy na osi X
  • $y2- punkt końcowy na osi Y

Wypełnijmy teraz więc jedynie jakąś część obrazka:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $black = imagecolorallocate($image, 0, 0, 0);
  14.  
  15. // zdefiniowaliśmy kolor czarny dla tła
  16.  
  17.  
  18.  
  19. $red = imagecolorallocate($image, 255, 0, 0);
  20.  
  21. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red
  22.  
  23.  
  24.  
  25. imagefill($image, 0, 0, $black);
  26.  
  27. // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
  28.  
  29.  
  30.  
  31. imagefilledrectangle($image, 20, 20, 100, 120, $red);
  32.  
  33. // wypełniliśmy obszar od 20-100px w poziomie i 20-120px w pionie
  34.  
  35.  
  36.  
  37. header("Content-type: image/png");
  38.  
  39. // definiujemy nagłówek z mimetype
  40.  
  41.  
  42.  
  43. imagepng($image);
  44.  
  45. // generujemy obrazek PNG
  46.  
  47.  
  48.  
  49. imagedestroy($image);
  50.  
  51. // zwalniamy uchwyt do obrazka
  52.  
  53. ?>
  54.  


Warto zauważyć, iż x2 i y2 nie oznaczają szerokości i wysokości wypełnienia lecz współrzędne na obrazku:


Współrzędne liczymy zawsze od lewego górnego rogu obrazka, który posiada współrzędną (0, 0).

6. Kanał alpha

Jak teraz utworzyć obrazek z kanałem alpha?
Po pierwsze musimy zdefiniować nasz kolor z takim właśnie kanałem. Robimy to za pomocą funkcji:

  1. $color = imagecolorallocatealpha($image, R, G, B, Alpha)

gdzie kanał alpha może przyjąć wartości od 0 (całkowicie nieprzezroczysty) do 127 (całkowicie przezroczysty)

Stwórzmy więc nasz kolor czerwony, tak aby był w połowie przeźroczysty (wartość alpha - 64):

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $black = imagecolorallocate($image, 0, 0, 0);
  14.  
  15. // zdefiniowaliśmy kolor czarny dla tła
  16.  
  17.  
  18.  
  19. $red = imagecolorallocatealpha($image, 255, 0, 0, 64);
  20.  
  21. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red, tym razem z kanałem alpha
  22.  
  23.  
  24.  
  25. imagefill($image, 0, 0, $black);
  26.  
  27. // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
  28.  
  29.  
  30.  
  31. imagefilledrectangle($image, 20, 20, 100, 120, $red);
  32.  
  33. // wypełniliśmy obszar od 20-100px w poziomie i 20-120px w pionie
  34.  
  35.  
  36.  
  37. header("Content-type: image/png");
  38.  
  39. // definiujemy nagłówek z mimetype
  40.  
  41.  
  42.  
  43. imagepng($image);
  44.  
  45. // generujemy obrazek PNG
  46.  
  47.  
  48.  
  49. imagedestroy($image);
  50.  
  51. // zwalniamy uchwyt do obrazka
  52.  
  53. ?>
  54.  


Wynik:




Jak widać, czerwony prostokąt troche nam przyciemniał, gdyż jest na wpół przezroczysty.
Cały obrazek jednak jako taki jest wciąż całkowicie nieprzeźroczysty. Jak teraz sprawić, aby nasz PNG jako całość uzyskał przezroczystość? Na logikę może się wydawać, że dałoby radę zrobić to za pomocą:

  1. $black = imagecolorallocatealpha($image, 0, 0, 0, 100);

dla tła.

To jednak nie pomoże. Zobaczmy:




Obrazek nie jest przezroczysty pomimo podania w kolorze tła kanału alpha.

7. Zapis kanału alpha - imagesavealpha()

Dlaczego nie udało się nam uzyskać przezroczystości dla całego obrazka?
Ponieważ obrazek jako taki nie ma zapisanego w sobie kanału alpha, musimy to uczynić funkcją:

  1. imagesavealpha($image, true);

Nasz kod wyglądać więc będzie tak:

  1. <?php
  2.  
  3. $width = 400;
  4.  
  5. $height = 300;
  6.  
  7. $image = imagecreatetruecolor($width, $height);
  8.  
  9. // stworzyliśmy pusty obrazek o szerokości 400px i wysokości 300px
  10.  
  11.  
  12.  
  13. $black = imagecolorallocatealpha($image, 0, 0, 0, 100);
  14.  
  15. // zdefiniowaliśmy kolor czarny dla tła, z kanałem alpha = 100
  16.  
  17.  
  18.  
  19. $red = imagecolorallocatealpha($image, 255, 0, 0, 64);
  20.  
  21. // zdefiniowaliśmy kolor czerwony i zapisaliśmy go do zmiennej $red, z kanałem alpha = 64
  22.  
  23.  
  24.  
  25. imagefill($image, 0, 0, $black);
  26.  
  27. // wypełniliśmy obszar 400x300px naszego obrazka kolorem pobranym ze zmiennej $black
  28.  
  29.  
  30.  
  31. imagefilledrectangle($image, 20, 20, 100, 120, $red);
  32.  
  33. // wypełniliśmy obszar od 20-100px w poziomie i 20-120px w pionie
  34.  
  35.  
  36.  
  37. header("Content-type: image/png");
  38.  
  39. // definiujemy nagłówek z mimetype
  40.  
  41.  
  42.  
  43. imagesavealpha($image, true);
  44.  
  45. // zapisujemy kanał ALPHA w obrazku
  46.  
  47.  
  48.  
  49. imagepng($image);
  50.  
  51. // generujemy obrazek PNG
  52.  
  53.  
  54.  
  55. imagedestroy($image);
  56.  
  57. // zwalniamy uchwyt do obrazka
  58.  
  59. ?>
  60.  


Wynik:




Jak widać, tym razem obrazek wyświetli się nam w całości jako półprzezroczysty.
To tyle na początek, wiemy już mniej więcej jak działa bibioteka GD, w następnych artykułach poznamy następne jej funkcje i sposoby wykorzystania. W ramach ćwiczeń polecam poeksperymentowanie z udostępnionym tutaj kodem, zmieniając np. współrzędne i kolory, a następnie potestowanie wyników takich zmian.

1 komentarz:

Masz sugestię? Znalazłeś błąd? Napisz komentarz! :)

webmaester.pl - profesjonalne projektowanie WWW i webaplikacji
webmaester.pl - profesjonalne projektowanie WWW i webaplikacji