A Képfeltöltés című oldalon megállapítottuk, hogy egy képgaléria
képeinek áttekintéséhez a pici indexképek megjelenítésekor is a teljes méretű képeket használni
több szempontból is problémás. Problémát jelenthet, hogy lassú lesz a betöltés, és problémát
jelenthet az is, hogy a nagy képek teljes mérettel történő letöltése indokolatlan adatforgalmat
generál, ami korlátos mobilnet-keret esetén eléggé fájhat a weboldalra tévedő gyanútlan látogatónak.
Mindezek miatt szükséges, hogy a szerveren ne csak a teljes méretű képeket tároljuk, hanem legyen
meg minden képnek a kicsinyített változata, vagyis az indexkép. De hogyan készíthetünk indexképeket
automatizáltan, képszerkesztő programok használata nélkül?
Képek átméretezése
A képek átméretezése valójában egy kép, vagy képrészlet másolásán keresztül valósul meg: a
kiindulási képről a kívánt képrészletet (de leggyakrabban a teljes képet) át kell másolni
egy célkép (leggyakrabban egy, az eredetitől eltérő méretű üres kép) meghatározott területére,
az átméretezés lehetőségével. Ezt a lehetőséget a leghatékonyabban az
függvény biztosítja számunkra, melynek deklarációja:
imagecopyresampled ( resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src_x, int $src_y, int $dst_w, int $dst_h, int $src_w, int $src_h ) : bool
A deklarációban szereplő bemeneti paraméterek jelentését a következő ábra szemlélteti
ahol a $src_image, és a $dst_image a memóriában létrehozott (kép)változókat jelenti.
Átméretezés, de hogyan?
Az rendben van, hogy az imagecopyresampled() lehetőséget ad a kicsinyítésre, de van, amiről
nekünk kell döntenünk a kicsi kép elkészítése előtt. Vajon hogyan kicsinyíthetjük le a jobb oldalon látható
képet? Melyik megoldást válasszuk az alábbi három lehetőség közül?
Az lenne a jó, ha a kicsinyített képünk négyzet alakú lenne, torzulásmentes (vagyis aránytartó),
és a teljes eredeti képi tartalom rajta lenne. Ám ezt kizárólag akkor lehetséges megvalósítani,
ha az eredeti kép is négyzet alakú. De jellemzően nem az. Így valamiből engedni kell:
az első kép torzult, nem tartottuk meg az eredeti képarányt;
a második képről levágtuk az eredeti kép tetejét, és alját;
a harmadik kép nem négyzet alakú, ami így vagy nem használja ki a
rendelkezésére álló képi területet, vagy sok kicsi indexkép egymás mellé
helyezésekor a különböző képarányok esetén kaotikus látványt eredményez.
Általában az első opció nem reális választás, mert bár jelen esetben a fenyőfánk lehet tömörebb, mint az eredeti képen,
ám embereket ábrázoló képek esetén nagyon nem szerencsés az arányok torzítása. Vagyis igazából a második, és a harmadik
lehetőségből választhatunk, amely választás teljesen szubjektív, és nincs a kérdésre helyes, vagy helytelen válasz. Mi
most itt a folytatásban a harmadik változat mellett tesszük le a voksunkat, és ennek megfelelően dolgozunk tovább.
Lássuk a gyakorlati megvalósítást!
Azt, hogy a fentebb említett függvény - és egyáltalán: a PHP grafikus függvénykönyvtára - használható-e a
mi aktuális fejlesztőkörnyezetünkben, a Képszerkesztés című oldalon már
megvizsgáltuk. Mindez előfeltétele a folytatásnak.
Leendő programunkat a következő szempontok szerint készítsük el:
programunkat függvényként valósítsuk meg;
a függvénynek két kötelező paraméterként egyrészt kelljen megadni az eredeti kép nevét
az elérési útvonalával együtt, másrészt pedig a leendő indexkép nevét és a hozzá tartozó
mappát, ahová a kicsinyített képet helyezni szeretnénk;
a függvény visszaadott értéke mutassa azt, hogy sikerült-e elvégezni a kicsinyítést
Ezen szempontrendszer mentén az alábbi program készíthető (a forráskód a képre kattintva érhető el):
A mintaprogram jelenlegi változatának hiányossága, hogy csak JPG típusú képek esetén működik. Ám a képtípus
meghatározását követően egy elágazással ez a probléma könnyen orvosolható. Tegye meg, hogy az Ön változata
már több képtípus (WEBP, PNG, GIF) esetén is kicsinyítsen!
Képek vízjelezése (logózása)
A vízjelezés (logózás) technikailag teljesen ugyanazt a programozási eszköztárat igényli,
mint a képméretezés, azzal a különbséggel, hogy míg az átméretezésnél az eredeti képet
másoljuk egy új képre, addig a vízjelezésnél a kívánt logót fogjuk az eredeti képre
másolni. A program paramétereit tehát ennek megfelelően kell átírni.
Feladat
Vízjelezés
Egészítse ki a fent elkészített programot egy újabb függvénnyel, mely egy megadott képre a jobb alsó
sarokban vízjelet (logót) helyez. A függvénynek ezúttal csak egy paramétere legyen: a vízjelezendő kép.
Az eredmény az eredeti kép felülírásával legyen elmentve.
Vízjelhez képet keressen az interneten. A keresés során ügyeljen rá, hogy a képnek esztétikai
okokból átlátszó hátterűnek kell lennie. Amennyiben nincs kedve képet keresni, az oldalsó
ceruzát is használhatja erre a célra. A kép természetesen átlátszó hátterű, ám vízjelezéskor
érdemes kisebb méretben gondolkodni.
Kiindulási képeket szintén az interneten kereshet, de akár az alábbi linket is felhasználhatja,
mely minden kattintásra más és más képet ad, véletlenszerűen választva.
Az rendben van, hogy az imagecopyresampled() lehetőséget ad a kicsinyítésre, de van, amiről
nekünk kell döntenünk a kicsi kép elkészítése előtt. Vajon hogyan kicsinyíthetjük le a jobb oldalon látható
képet? Melyik megoldást válasszuk az alábbi három lehetőség közül?
előző oldal
© infojegyzet.hu, 2023. március 