Eszköztár

138 Kezdőlap - Webszerkesztés - PHP - Képrajzolás

Mintapélda

A PHP nyelv számos rajzolást segítő függvényt tartalmaz. Ezek hasznát nem úgy kell elképzelni, hogy innentől képesek leszünk programmal házikót, vagy hóembert készíteni, hiszen nem ez a cél. Bár valóban képesek leszünk rá. Ám sokkal életszerűbb feladat, amikor pl. számadatokat szeretnénk vizuálisan, vagyis valamilyen ábrán megjeleníteni. Ennek nyilvánvaló eszközei a különféle grafikon- és diagramtípusok. Vagyis szükség szerint az általunk éppen megjeleníteni kívánt diagramot fogjuk a rajzoló utasításokkal elkészíteni. Mindehhez azért kell a program, mert a számadatok, amikből dolgozunk, jellemzően online érhetőek el (pl. adatbázisban szerepelnek, vagy JSON, XML, CSV formában kérdezzük őket le), ennek megfelelően az is erősen valószínű, hogy folyamatosan változnak. Ilyenformán a programunk dinamikusan, mindig a valós idejű adatok alapján kell, hogy elkészítse az aktuális ábrát.

Az alábbiakban példaként a fent említett rajzoló függvények sokaságából található egy rövid válogatás. Nézzük, mi minden rajzolható velük:

1. imagesetpixel : egyetlen szines képpont
2. imageline : egyenes vonal
3. imagerectangle : üres téglalap
4. imagefilledrectangle : kitöltött téglalap
5. imagefilledellipse : kitöltött kör, vagy ellipszis
6. imagepolygon : sokszög
7. imagettftext : szöveg, képfelirat

Természetesen minden alakzat rajzolható üresen, vagy kitöltötten, és minden alakzathoz beállítható a vonalvastagság, a vonalszín, a kitöltés színe... és gyakorlatilag minden elképzelhető tulajdonsága. Az ezekhez szükséges függvények megtalálásához a PHP garfikus függvényeinek listáját célszerű böngészni:

• PHP képmanipuláló függvények (ENG)

A folytatásban nézzünk meg két konkrét példát a függvények alkalmazására.

1. Egy egyszerű rajz

Készítsük el a Föld egy egyszerű, sematikus rajzát az oldalsó ábrának megfelelően. Tekintsük a Föld képén látható függőleges vonalat a Greenwichi délkörnek, és ehhez képest jelöljük rajta Magyarország helyét.
A képet a globe.php nevű programfájl hozza létre, melyet az alábbi HTML kóddal illesztettünk az oldalba:

<img src='globe.php'>

Igen, valóban .php a képfájlunk fájltípusa! De hogyan lehetséges ez?

Kétségtelen tény, hogy a PHP programok lefutásuk eredményeként a legtöbb esetben HTML kódot álítanak elő, ám ez nem kizárólagos. Megfelelő körülmények között a PHP kód eredménye akár egy kép is lehet. Most is erről van szó. Nézzünk bele a képet megvalósító PHP forráskódba:

A kód alapján érdemes néhány fontos megállapítást tennünk:

(1)
A PHP kódunk attól fog HTML eredmény helyett képet előállítani, hogy erre utasítjuk a fejlécben a header() függvénnyel. A header-beállítás kizárólag akkor lehetséges, hogy korábban még semmit nem írtunk a HTML kódba. Ez azt is jelenti, hogy a PHP rész kezdete előtt sem üres sor, sem szóköz nem szerepelhet!

(2)
A rajzolás a program során végig egy memóriaváltozóban történik a számítógép memóriájában, vagyis a rajz egyes fázisait mi nem fogjuk külön-külön látni, csak a végeredményt. A rajzoláshoz szükséges képváltozót létre kell hozni, be kell állítani a kép méretét, és ezt a változót minden rajzműveletben oda kell adni paraméterként az aktuális rajzi elemet megvalósító függvénynek.

(3)
Csak olyan színeket használhatunk a rajzunkon, amelyeket létrehoztuk az imagecolorallocate függvénnyel. Ráadásul az elsőként definiált szín egyben a leendő képünk háttérszíne is lesz.

(4)
A memóriaváltozóban megrajzolt végleges képet oda kell adni a böngészőnek. Erre szolgál az imagegif függvény.

(5)
A képrajzolás mindig sok memóriahasználattal jár, ezért a kép elkészülte után az érintett memóriaterületet fel kell szabadítani az imagedestroy függvénnyel.

Joggal kérdezhetjük: minek kellett ehhez PHP kód, amikor az előállított kép teljesen statikus, vagyis sosem változik. Ezzel az erővel egy képszerkeszőben is legyárthattuk volna hagyományos GIF képként, vagy kereshettünk volna hasonló tartalmú képet a neten.
Azért, hogy e kérdésre megnyugtató választ adhassunk, egészítsük ki a Föld képét egy szimbólikus Nappal, melyet évszaktól és napszaktól függően több-kevesebb pontossággal helyezzünk rá a Foldre annak megfelelően, hogy éppen hol delel a Nap. Továbbá feliratozzuk az így kialakuló képet a kép bal alsó sarkában a mai dátummal, a jobb alsó sarokban pedig a pontos idővel!
Az így kiegészített kép az alábbaik szerint alakul ebben a pillanatban: Ismét nézzük meg a képhez tartozó forráskódot:

Megfigyelhető a forráskódban, hogy a képen a Nap vízszintes koordinátáját valóban az aktuális pontos idóből számítjuk, a függőleges koordinátáját pedig az aktuális dátumból - pontosabban az aktuális nap éven belüli sorszámából. Érdemes észrevenni azt is, hogy reggel 6 előtt, és este 7 után nem látszik a Nap a képen, hiszen olyankor a Föld túlsó oldalán ragyog.

2. Diagram készítése

Készítsünk összehasonlító oszlopdiagramot az infojegyzet.hu oldal tegnapi, illetve mai eddigi látogatottságáról, óránkénti bontásban. Az adatokhoz az

api.infojegyzet.hu/latogatottsag/

API által nyújtott napi eredményeit tekintsük alapnak!
Használjuk ki továbbá, hogy az API dátummal paraméterezhető:

api.infojegyzet.hu/latogatottsag/?datum=2024-04-19

Az API által visszaadott JSON formátumú látogatottsági adatok az alábbi linken tekinthetőek át olvashatóan. Szükség szerint használjuk ezt az értelmezéshez!

• A fenti JSON tartalma áttekinthető formában

Az elérhető adatok felhasználásával pl. a következő diagram készíthető: A diagramot létrehozó program forráskódja a lenti képre kattintva érhető el, melynek értelmezését a kódban szereplő kommentek segítségével immár az olvasóra bízzuk.

---

Feladat

CAPTCHA kép készítése

Készítsen webes felületet, mely megjelenít egy az alábbihoz hasonló CAPTCHA képet, illetve be is kéri ellenőrzésként annak szöveges tartalmát, majd válaszul megadja, hogy helyesen lett-e a tartalom begépelve, avagy sem.
A kép tartalma értelemszerűen minden oldalbetöltés (oldalfrissítés) eredményeként más és más legyen, továbbá adjon lehetőséget a felhasználó számára, hogy nehezen olvasható kép esetén tudja frissíteni annak tartalmát az oldal újratöltése nélkül is.

Kód:

További kapcsolódó feladatok:

• Budapest éghajlata
• Legrövidebb út

---

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenhét + öt? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.

© infojegyzet.hu, 2023. március