Artykuly i porady dla uzytkowników

Możliwości biblioteki GD2

– Generowanie obrazków jako ochrona przed botami w serwisach
— Dynamiczna zmiana rozmiaru obrazów oraz możliwość nakładania filtrów
—- Generowanie w locie miniaturek, przydatne na stronach internetowych generowanych dynamicznie

Na pewno każdy nie raz się spotkał w internecie z obrazami generowanymi w sposób dynamiczny. Najczęściej pojawiają się one podczas gdy wypełniamy jakiś formularz jako zabezpieczenie antyspamowe. Taki obrazek tworzy skrypt losujący jakieś symbole po czym nakłada je na obrazek i wysyła do przeglądarki. Taki tekst na obrazku potrafi przeczytać tylko człowiek, co chroni przed działalnością botów i nadmierną ilością spamu.

Innym przykładem są portale społecznościowe, na które wrzucamy różne zdjęcia i są one automatycznie skalowane do wymaganego rozmiaru. Mechanizm ten nie byłby jednak możliwy do wykonania, gdyby nie istniała możliwość generowania dynamicznych obrazów na serwerze.
Jednym z takich rozwiązań jest dołączona do PHP biblioteka GD do obróki plików graficznych.
Na początek definicja biblioteki:

Biblioteka (w informatyce) – zbiór klas, funkcji (i ew. innych konstrukcji programistycznych), z których korzystają różne programy.

Istnieje wiele bibliotek również open sourcowych. GD2 daje naprawdę wiele możliwości przy wykorzystaniu różnego rodzaju grafiki rastrowej. Tak więc obsługiwane są takie formaty jak: JPG, GIF, PNG, BMP. Biblioteka ta nie obsługuje obrazów wektorowych, tylko rastrowe, co powoduje problem stratnej kompresji, ale dokładniej o tym później na przykładach.

Najpierw pokaże podstawowe funkcje tej biblioteki.

POBIERANIE OBRAZU
imagecreatefromjpeg (ścieżka do obrazu JPG)
imagecreatefrompng (ścieżka do obrazu PNG)
imagecreatefromgif (ścieżka do obrazu GIF)
imagecreatefrombmp(ścieżka do obrazu BMP)
NAGŁÓWEK
header(‘Content-Type: image/jpeg’);
ZAPIS
imagejpeg ($obraz [, $ścieżka do zapisu [, int $jakość]] )
Podobnie działają imagepng, imagegif, imagebmp.

Aby w ogóle pobrać obrazek i wyświetlić go w przeglądarce należy użyć funkcji imagecreatefromjpeg lub png lub gif lub bmp równocześnie z funkcją imagejpeg. Pierwsza pobiera zdjęcie, druga zapisuje go do zmiennej lub jak wolimy do pliku. Przy przesyłaniu do przeglądarki oczywiście nie wolno zapomnieć o wysyłaniu nagłówka, który informuje jaki format danych ma wyświetlić.
Praktyczne zastosowanie tych funkcji jest przy okazji wyświetlania zdjęć np.: w płatnych serwisach ze zdjęciami, gdzie nakładany jest napis lub logo w postaci znaku wodnego na zdjęcie jako ochrona obrazka.

header(‘Content-Type: image/jpeg’);
$img = imagecreatefromjpeg(‘dom.jpg’);
Przesłanie prosto do przeglądarki:
imagejpeg($img,NULL,90);
Lub zapis do pliku:
imagepng($img,’dom.png’,100);

Domyślnie obrazy zapisywane są z jakością 75/100.

Istnieje również możliwość pobrania obrazu w danym formacie i zapisanie go w innym, wyjątek tutaj stanowi kompresja z JPG na gif gdyż to rozwiązanie nie jest open sourcowe i potrzebne jest zakupienie licencji.

Jeśli chodzi o funkcję imagejpeg() to daje ona możliwość zapisu do pliku z określoną przez użytkownika jakością, ale oczywiście nie da się poprawić jakości obrazu który pierwotnie był zły. Domyślnie obrazy zapisywane są z jakością 75/100. Jeśli jako drugi parametr ustawimy wartość NULL to można sterować jakością obrazu przesyłanego prosto do przeglądarki
[PRZYKŁAD]

NANOSZENIE TEKSTU

imagettftext ( resource $obraz, float $rozmiar , float $pochylenie , int $x, int $y, int $kolor , string $czcionka, string $tekst )
imagecolorallocate ( resource $image , int $red, int $green , int $blue )

Czcionke podajemy jako ścieżkę do pliku tff np.
arial.ttf verdana.ttf trebuc.ttf tahoma.ttf

Imagettftext(obraz,wielkość czcionki w px,pochylenie w stopniach(0-360), x i y – współrzędne lewego dolnego rogu pierwszego znaku, kolor czcionki ustalony za pomocą funkcji imagecolorallocate(), której trzeba podać składowe RGB, TYP czcionki przykładowo: arial.ttf verdana.ttf trebuc.ttf tahoma.ttf, plik z taką czcionką trzeba wgrać do osobnego folderu i stamtąd pobierać „tekst do wyświetlenia”)

Funkcja ta dokonuje nanoszenia tekstu na obraz, przy czym czynność ta jest nieodwracalna, bo powoduje skasowanie pikseli pod spodem, czyli nie ma możliwości w poźniejszych operacjach na odzyskanie tej części obrazka spod tekstu.

Rozszerzeniem tej funkcji jest funkcja imagecolorallocatealpha() która pozwala ustalać poziom przezroczystości dla napisu w zakresie 0-127.

$image = imagecreatefromjpeg(„img/grecja.jpg”);
$r = 30;
$g = 0;
$b = 255;
$kolor2 = imagecolorallocate($image, 0,255,100);
$kolor = imagecolorallocatealpha($image, $r,$g,$b,70);
$rozmiar = 20;
$pochylenie = 48;
$x = 130;
$y = 640;
$font = ‘font/cnpk.ttf’;
imagettftext($image, $rozmiar, $pochylenie, $x, $y, $kolor,
$font,’Pozdrowienia z Grecji’);
imagettftext($image, 15, 0, 240,650, $kolor2, $font,’przesyła …’);
imagejpeg($image,’nowe/grecja_n.jpg’,90);

RYSOWANIE KSZTAŁTÓW
Biblioteka GD nie tylko pozwala na nanoszenie tekstu na obrazy, ale także kształtów takich jak linie, prostokąty, elipsy i okręgi aż do bardziej złożonych wielokątów. Do tego celu służą funkcje:
• imageline() – rysuje linię,
• imagerectangle() – rysuje prostokąt,
• imageellipse() – rysuje elipsy i okręgi,
• imagepolygon() – służy do tworzenia bardziej złożonych wielokątów.
Każda z tych funkcji ma także swój odpowiednik pozwalający na rysowanie z wypełnieniem, czyli odpowiednio: imagefilledline(), imagefilledrectangle(), imagefilledellipse(), imagefilledpolygon().

Parametry dla funkcji wielokąta
imagepolygon ( resource $image , array $tablica_punktów , int $ilość_punktów , int $color )

Funkcje jako argumenty przyjmują obrazek, współrzędne początkowe, szerokość i wysokość oraz kolor. Parametrami różni się jedynie funkcja do rysowania wielokątów, gdyż argumentami dla niej jest tablica z punktami – współrzędnymi oraz ilość tych punktów. Tablica jest jednowymiarowa, a współrzędne X i Y podawane są naprzemiennie. Możliwe jest jak widać rysowanie z ustalona przezroczystością co widać na przykładzie.

$image = imagecreatefromjpeg(„img/women.jpg”);
//$kolor = imagecolorallocatealpha($image, 255, 255, 255,60);
$kolor = imagecolorallocate($image, 64, 0, 0);
//imagefilledrectangle($image, 0, 0, 500, 500, $white);
//ImagePolygon (int im, array points, int num_points, int col)
$points = Array(0,0,0,483,350,483,350,0,300,50,300,433,50,433,50,50,300,50,350,0);
imagefilledpolygon($image,$points,10,$kolor);
imagejpeg($image,”nowe/ramka.jpg”,100);

PRZEZROCZYSTOŚĆ W OBRAZACH
Jeśli chodzi o przezroczystość biblioteka GD umożliwia kopiowanie na siebie obrazów, które mają ustaloną przezroczystość. Chodzi szczególnie o format PNG, który posiada wielobitową przezroczystość, co daje nam nanoszenie na siebie obrazów, które mają jakieś przezroczyste gradienty. Do zdefiniowania stopnia zakrycia jednego obrazu przez drugi służy tzw. KANAŁ ALPHA, który przyjmuje wartości 0 (całkowita nieprzezroczystość – zakrycie kolorem) – 127 (całość przezroczysta). Do kopiowanie obrazów służy funkcja:

imagecopy ( obraz na który kopiujemy , obraz PNG lub GIF, x docelowe , y docelowe, x obrazku png , y obrazku png , szerokość png ,wysokość png)

Dla porównania obrazek skopiowany png i gif. Można zauważyć różnicę w jakości nałożonych obrazków. Wynika to z jednobitowej i wielobitowej przezroczystości dla GIF i PNG.

$img1 = imagecreatefromjpeg(„img/makeup.jpg”);
$img2 = imagecreatefromgif(„img/f.gif”);
//$img2 = imagecreatefrompng(„img/fantastic.png”);
list($width, $height) = getimagesize(„img/fantastic.png”);
imagecopy($img1, $img2, 20, 330, 0, 0, $width, $height);
imagejpeg($img1,”nowe/makeup_g.jpg”,100);

ZMIANA ROZMIARU OBRAZU
Bardzo często wykorzystywaną funkcją w różnych serwisach czy stronach internetowych jest funkcja do zmiany wysokości i szerokości obrazu. Tutaj wykorzystywane są 2 funkcje: imagecopyresampled oraz imagecopyresized.

ImageCopyResized (int dst_im, int_src_im, int dstX, int dstY, int srcX, int srcY, int dstW, int dstH, int srcW, int srcH)

Funkcje kopiują obszar prostokątny oraz zmieniają rozmiar kopiowanego obszaru obrazka do innego obrazka; dst_im – obrazek docelowy, src_im – obrazek źródłowy, dstX i dstY – wsółrzędne umiejscowienia górnego lewego rogu kopiowanej części obrazka na obrazku docelowym, srcX i srcY – wsółrzędne górnego lewego rogu kopiowanej części obrazka, dstW i dstH – szerokość i wysokość docelowa kopiowanej częsci obrazka, srcW i srcH – szerokość i wysokość kopiowanej części obrazka.

Istotną różnicą między tymi dwoma funkcjami jest to, że imagecopyresized tylko zmienia rozmiar obrazu, natomiast imagecopyresampled przelicza ponownie każdy piksel i skalowany obraz jest dużo ładniejszy, gdyż nie ma poszarpanych krawędzi. Jednym słowem funkcja ta nakłada filtr. Obrazuje to przykład:

PRZYKŁAD:
$src = „img/kolo.jpg”;
$image = imagecreatefromjpeg($src);
list($width,$height) = getimagesize($src);
$new_width = 250;
// Zmiana proporcjonalna
$new_height = $new_width /$width * $height;
$image_new = imagecreatetruecolor($new_width, $new_height);
$image_new2 = imagecreatetruecolor($new_width, $new_height);
imagecopyresized($image_new, $image, 0, 0, 0, 0, $new_width, $new_height,$width,$height);
imagecopyresampled($image_new2, $image, 0, 0, 0, 0, $new_width, $new_height,$width,$height);
imagejpeg($image_new,’nowe/roz_g1.jpg’,100);
imagejpeg($image_new2,’nowe/roz_g2.jpg’,100);

Imagecopyresampled ponownie przelicza piksele i działa jak filtr co daje lepszy efekt wygładzenia.

WYCINANIE FRAGMENTÓW

Funkcje imagecopyresized() i imagecopyresampled() mają szerokie zastosowanie. Pozwalają na wycinanie fragmentów obrazu, ich powiększanie lub pomniejszanie.

header(„Content-type: image/jpeg”);
$src = ‘img/roza.jpg’;
$image = imagecreatefromjpeg($src);
list($width, $height) = getimagesize($src);
$new_width = 350;
$new_width = 130; //dla pomniejszenia
$new_height = $new_width/$width * $height;
$image_new = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($image_new, $image, 0, 0, 40, 40, $new_width, $new_height,150, 150);
imagejpeg($image_new);

W przykładzie został wycięty fragment róży i powiększony.

imagecopyresampled($image_new, $image, 0, 0, 40, 40, $new_width, $new_height,150, 150);

Kopiowanie odbywa się w punkcie o współrzędnych (40,40) i jest kopiowany obszar o szerokości i wysokości 150px. Taki wycięty prostokąt jest nanoszony na nowy obraz, który jest tworzony przez funkcję imagecreatetruecolor(szerokość, wysokość) (jest to paleta koloru czarnego na której coś możemy robić) i automatycznie powiększony. Jakość powiększonego obrazu zależy od pierwotnej jakości zdjęcia z którego wycinamy.

FILTRY
Bardzo przydatną rzeczą jest, jaką oferuję biblioteka GD są różnego rodzaju filtry. Filtry znane są z różnego rodzaju programów graficznych i umożliwiają wszelakie operacje na pikselach.

imagefilter ( resource $obraz , int $typFiltra [, int $arg1 [, int $arg2 [, int $arg3 [, int $arg4 ]]]] )

● IMG_FILTER_NEGATE – negacja obrazka – czyli obraz składa się z kolorów dopełnień
● IMG_FILTER_GRAYSCALE – konwersja obrazka do odcieni szarości
● IMG_FILTER_BRIGHTNESS – zmiana jasności obrazka, arg1 to nowy poziom
jasności z zakresu od -255 do +255, wartości dodatnie zwiększają jasność
● IMG_FILTER_CONTRAST – zmiana kontrastu obrazka, arg1 to nowy poziom
kontrastu z zakresu od -255 do +255, wartości ujemne zwiększają kontrast,
● IMG_FILTER_COLORIZE – koryguje zawartość składowych RGB w obrazku. arg1, arg2
i arg3 to wartości korekcyjne składowych RGB z zakresu od -255 do +255, wartości
dodatnie zwiększają zawartość danej składowej,
● IMG_FILTER_EDGEDETECT – uwydatnia krawędzie i kontury
● IMG_FILTER_EMBOSS – efekt płaskorzeźby
● IMG_FILTER_GAUSSIAN_BLUR – rozmycie obrazka metodą konwolucji z macierzą
o obwiedni krzywej Gaussa, niestety żadnej regulacji, parametry są ignorowane,
● IMG_FILTER_SELECTIVE_BLUR – inny rodzaj rozmycia, osiąga się efekt
nieostrego zdjęcia, znów bez regulacji,
● IMG_FILTER_SMOOTH – wygładzenie obrazka, wartości dodatnie to mniejsze
wygładzenie, przydatny zakres parametru arg1 to <-8, +8>,
● IMG_FILTER_MEAN_REMOVAL – odjęcie od obrazka jego wartości średniej
kolorów.

Minusem niektórych tych filtrów jest brak możliwości regulacji parametrów, ale ogólnie filtry przydają się, gdy chcemy dynamicznie zmienić obraz na np. szary.

KOMPRESJA

Aby wykorzystać możliwości poznanych funkcji z tej biblioteki przygotowałam stronę internetową, na której można zmienić rozmiar zdjęcia oraz zmniejszyć jego wagę podając maksymalny rozmiar jaki może mieć kompresowane zdjęcie.

Sprawdź na stronie: zmniejsz-foto.netinfo.net.pl