Képfeltöltés automata átméretezéssel

Képfeltöltés automata átméretezéssel

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.