Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. PHP
Code

Könnyű képátméretezés PHP-vel

by
Difficulty:IntermediateLength:LongLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Szerettél volna valaha egy mindenre jó, könnyen használható módszert a képeid méretezésére PHP-ban? Nos, erre valók a PHP osztályok – újrahasznosítható funkciók, amik a háttérben elvégzik a piszkos munkát. Meg fogjuk tanulni, hogy hogyan hozzuk létre a saját, jól megszerkesztett osztályunkat, és hogy hogyan bővítsük. Az átméretezésnek könnyűnek kell lennie. Mennyire könnyűnek? Mondjuk három lépésnyinek!


Bevezetés

Hogy egy gyors betekintést adjunk, mit szeretnénk elérni az osztályunkkal, az osztálynak a következőnek kell lennie:

  • Könnyen használható
  • Formátum független. Pl.: megnyitás, átméretezés és mentés különféle képformátumokban.
  • Intelligens méretezés – nincs képtorzítás!

Megjegyzés: ez a bemutató nem arról szól, hogyan hozzunk létre osztályokat és objektumokat, és – bár ez a készség segíthet – nem is szükséges ennek a bemutatónak a követéséhez.

Sok mindent kell átnéznünk – fogjunk hozzá.


1. lépés: Előkészület

Elkezdeni könnyű. Hozz létre két fájlt a munkakönyvtáradban: az egyik legyen az index.php, a másik a resize-class.php


2. lépés: Az objektum meghívása

Hogy legyen némi elképzelésed arról, mit szeretnénk elérni, a kódolást a képek átméretezésénél használt meghívásokkal kezdjük. Nyisd meg az index.php fájlodat és add hozzá a következő kódot.

Ahogy láthatod, logikusan épül fel az, amit csinálni fogunk. Megnyitjuk a fájlt, beállítjuk a méreteket, amikre szeretnénk a képet átméretezni, és az átméretezés típusát.
Aztán elmentjük a képet, kiválasztjuk a kívánt képformátumot és képminőséget. Mentsd és zárd be az index.php fájlodat.

A fenti kódból láthatod, hogy egy jpg fájlt nyitunk meg, de gifként mentjük. Emlékezz rá, hogy a rugalmasság a lényeg.


3. lépés: Az osztály váza

Az objektum-orientált programozás (OOP) az, ami lehetővé teszi a kényelmes használatot. Gondol úgy az osztályra, mint egy mintára; enkapszulálhatod az adatokat – újabb szakzsargon, ami valójában csak annyit jelent, hogy elrejted őket. Ezt azt osztályt újra és újra felhasználhatjuk anélkül, hogy újra kellene írni bármelyik átméretező kódot – csak meg kell hívnod a megfelelő eljárásokat, pont úgy, ahogy azt a második lépésben csináltuk. Amint a mintázatunk elkészült, létrehozzuk a mintázat egyes megjelenéseit, amiket objektumoknak nevezünk.

"Az összerakó függvény, amit konstruktornak neveznek, egy speciális osztály eljárás, amit az osztály hív meg egy új objektum létrehozásakor."

Kezdjük el létrehozni az átméretező osztályunkat. Nyisd meg a resize-class.php fájlt. Lentebb található egy nagyon kezdetleges osztály vázszerkezet, amit 'resize'-nak nevezünk. Vedd észre az osztály változók megjegyzés sort; Ide fogjuk hozzáadni a fontos osztály változóinkat a későbbiekben.

Az összerakó függvény, amit konstruktornak neveznek, egy speciális osztály eljárás (az "eljárás" kifejezés bár ugyanaz, mint a függvény, amikor osztályokról és objektumokról beszélünk, gyakrabban használatos), amit az osztály hív meg egy új objektum létrehozásakor. Ez megfelelő lesz számunkra az inicializáláshoz – amit a következő lépésben fogunk megtenni.

Vedd észre a dupla alsóvonalat a construct eljárásnál.


4. lépés: A konstruktor

Módosítani fogjuk a fenti konstruktor eljárást. Először is át kell adnunk az átméretezni kívánt képünk fájlnevét (és útvonalát). Ezt a változót $fileName-nek fogjuk hívni.

Meg kell nyitnunk a PHP-vel (egész pontosan a PHP GD könyvtárral) átadott fájlt, hogy a PHP el tudja olvasni a képet. Ezt az 'openImage' egyéni eljárással fogjuk megtenni. El fogom magyarázni, hogy hogyan
működik az eljárás, de most a lényeg, hogy az eredményt elmentsük egy osztályváltozóba. Az osztályváltozó is csak egy változó – de direkt ahhoz az osztályhoz készült. Emlékszel még az osztályváltozó megjegyzésre, amit korábban említettem? Add hozzá az 'image' private változót a 'private $image;' begépelésével. A változók 'Private'-té tételével azt állítjuk be, hogy a változót csak az osztály érheti el. Mostantól fogva meg tudjuk hívni a megnyitott képünket, azaz egy erőforrást, amit meg is fogunk tenni később, amikor majd átméretezünk.

Ha már itt vagyunk, tároljuk is el a kép magasságát és szélességét. Van egy olyan érzésem, hogy ennek később még hasznát fogjuk venni.

Most a következőre van szükséged.

Az imagesx és imagesy eljárások a GD könyvtár beépített függvényei. Ezek szerzik meg a képed szélességét és magasságát.


5. lépés: A kép megnyitása

Az előző lépésben meghívtuk az openImage egyéni eljárást. Ebben a lépésben létre fogjuk hozni ezt az eljárást. Azt szeretnénk, hogy a szkript helyettünk gondolkozzon, azaz attól függően, hogy milyen fájltípust kap, a szkriptnek kell eldöntenie, hogy melyik GD könyvtár függvényt hívja meg a kép megnyitásához. Ezt könnyen elérhetjük, ha összehasonlítjuk a fájlok kiterjesztését egy switch utasítással.

Átadjuk, hogy melyik fájlt szeretnénk átméretezni, és a program visszatér a fájl erőforrásával.


6. lépés: Hogyan méretezd át

Itt történik meg a csoda. Ez a lépés csak a magyarázata annak, hogy mit fogunk csinálni – szóval nem kell pluszban dolgoznunk. A következő lépésben készítünk egy public eljárást, amit az átméretezés végrehajtásához fogunk meghívni; így már van értelme átadni neki a szélességet és a magasságot, valamint azt az információt, hogy mekkorára szeretnénk méretezni a képet. Erről beszéljünk most egy kicsit. Előfordulhat, hogy egy konkrét méretű képet szeretnél átméretezni. Nagyszerű, vegyük bele ezt is. De sok olyan eset lehet, amikor több száz képet kell átméretezned, és mindegyiknek más a méretaránya - gondolj csak a portréképekre. Ezekkel a konkrét méretekkel az átméretezés komoly torzításokat okozhat. Ha vetünk egy pillantást a lehetőségeinkre, a torzítás megelőzhető az alábbi módokon:

  1. A kép átméretezése a lehető legpontosabban az új képméretünkhöz, a képarány megtartásával.
  2. A kép átméretezése a lehető legpontosabban az új képméretünkhöz és a felesleg levágása.

Mindkét lehetőség működőképes, igényeidtől függően.

Nos, igyekezni fogunk minden fenti lehetőséget kezelni. Épp ezért lehetőséget fogunk biztosítani:

  1. Átméretezés konkrét szélességgel/magassággal. (exact)
  2. Átméretezés szélesség alapján – konkrét szélesség lesz beállítva, a magasságot a méretarány szerint hozzáigazítjuk. (landscape)
  3. Átméretezés magasság alapján – hasonló az Átméretezés szélesség alapján-hoz, de itt a magasság van beállítva és a szélességet igazítjuk hozzá dinamikusan. (portrait)
  4. Automatikus meghatározási lehetőség 2 és 3 esetén. Ha végighaladsz egy különböző méretű fényképekkel teli mappán, döntse el a szkript, hogy hogyan kezelje őket. (auto)
  5. Átméretezés, aztán levágás. Ez a kedvencem. Pontos méret, nincs torzítás. (crop)

7. lépés: Átméretezés. Fogjunk hozzá!

Két része van az átméretezési eljárásnak. Az első, hogy egy optimális szélességet és magasságot szerezzünk az új képünknek néhány egyedi eljárás létrehozásával – és természetesen a fentebb leírt átméretezési 'lehetőségünk' átadása neki. A magasság és szélesség tömbként kapott eredmény lesz és beállítja a megfelelő változókat. Nyugodtan 'add át referenciaként' a változót – bár én ennek nem vagyok nagy rajongója.

A második része az, ami a tényleges átméretezést végrehajtja. Annak érdekében, hogy ne nyúljon hosszúra ez a bemutató, itt olvashatsz inkább a következő GD függvényekről:

Az imagecreatetruecolor eljárás (egy új true color kép) kimenetét is elmentjük osztályváltozóként. Add hozzá a 'private $imageResized;'-et a többi osztályváltozódhoz.

Az átméretezést egy GD Library nevű PHP modul végzi. Sok általunk használt eljárást ez a könyvtár biztosít.


8. lépés: A döntési fa

Minél többet dolgozol ezen, annál kevesebb dolgod lesz majd az átméretezéskor. Ez a módszer dönti el, hogy melyik úton haladjunk a cél felé, hogy megkapjuk az átméretezési opció alapján az optimális átméretezési szélességet és magasságot. Meg fogja hívni a megfelelő eljárást, amit majd a következő lépésben hozunk létre.


9. lépés: Optimális méretek

Már átbeszéltük, mit fog ez a négy eljárás csinálni. Ezek csak alapvető számítások, amik kiszámítják nekünk, hogy melyik a legmegfelelőbb.


10. lépés: Levágás

Ha levágást igényeltél – mivel kiválasztottad a crop lehetőséget –, akkor még egy kisebb lépés van hátra. A képet a közepéből kiindulva fogjuk
levágni. A levágás az átméretezéshez hasonló folyamat, de még pár méret tulajdonságot bele kell venni.


11. lépés: A kép mentése

Végre eljutottunk idáig; mindjárt végzünk. Itt az ideje a kép elmentésének. Átadjuk az útvonalat, valamint a kép minőségét egy 0-100-as skálán, ahol 100 a legjobb, majd meghívjuk a megfelelő eljárást. Pár megjegyzés a képminőséggel kapcsolatban: a JPG 0-100-as skálát használ, 100 a legjobb minőség. A GIF képeknek nincs képminőség állítási lehetősége. A PNG-nek vand, de 0-9-es skálát használ, ahol 0 a legjobb. Ez nem túl jó, mert nem várhatjuk el mindig magunktól, hogy minden egyes alkalommal emlékezzünk erre, amikor elmentünk egy képet. Egy kicsit trükközünk, hogy szabványosítsuk mindegyikre.

Ez egy jó alkalom arra is, hogy a képünk forrását eltüntessük, ezzel némi memóriát felszabadítva. Ha úgy döntesz, hogy használod ezt a későbbiekben, jó ötlet lehet az elmentett kép adatainak elmentése.


Konklúzió

Nos, ennyi volt, srácok. Köszönöm, hogy követtétek ezt a bemutatót, remélem, hasznosnak találtátok. Örömmel veszem a visszajelzéseket a lenti hozzászólásokon keresztül.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.