Képfeltöltés automata átméretezéssel
- 2017-05-03
- 2677 megtekintés
- Szerző: Basa Bence
Rengetegszer szembesülünk azzal a problémával, hogy egy sablonba uniformizált képekre lenne szükség - azonban a rendelkezésreálló képek teljesen összevissza méretaránnyal rendelkeznek.
Ennek elkerülésére két egyszerű átméretezési megoldás létezik (és több, bonyolultabb): az egyik esetében középről indulva kivágjuk a képet, a másik esetben kibővítjük annyira, hogy elérje a képarányt. Mutatom gyakorlatban:
Legyen szó galériáról, vagy webáruházról, a thumbnail-nek (bélyegképnek) ugyanakkorának kell lennie. Esetünkben 1:1 arányú képre esett a választás, de ez lehet álló vagy fekvő téglalap is - a lényeg, hogy megegyezzenek a méretek.
A kék színű változat a legegyszerűbb: a Kitöltő algoritmus megkeresi, milyen irányban lóg ki a kép a tervezett arányhoz képest, majd a másik tengelyt alul-felül (vagy jobb-bal oldalt) kipótolja fehér-fekete-átlátszó színnel. Ezt termék aloldalakon szoktuk használni - de ez a lépés kiküszöbölhető, ha megfelelően van megépítve a sablon, nem érzékeny a képméretváltozásokra.
Listázáskor viszont annak érdekében, hogy a sok, egymás mellett felsorakoztatott bélyegkép ne hasson kuszának, az Adaptív átméretező algoritmust használtuk. Ez a kép közepéről indulva megnézi, hogy melyik szél (függőleges vagy vízszintes) van közelebb, átméretezi úgy hogy a közelebbi szél pont beleférjen a bélyegkép méretébe, majd középről indulva levágja a maradékot. Ez lesz a narancssárga bélyegkép. Ennek egy változata (akkor használható ha előre ismert a forrás képek mérete) a piros, de nem szerencsés a használata
Mint írtam, van bonyolultabb, kézi kijelölős megoldás is (a KuponOS esetében ilyet használtunk például), de a legtöbb esetben bőven elég a fenti két algoritmus. A végeredmény pedig egy esztétikus képi élmény.