Cover photo
meniny Dnes je: 23.6.2018, meniny má: Sidónia

Redcon

Automatická úprava obrázkov na webe

V praxi je bežné, že na web sa nahrávajú najrôznejšie druhy fotiek. Vysoké a úzke, široké a nízke. Rôzne formáty od jpg, cez png po gif... A mnohokrát potrebujeme aj napriek týmto rozdielom zachovať istú pravidelnosť a ucelený vizuál. Sú v podstate dve možnosti:

1) upraviť fotky pred ich uploadom na web v grafickom programe. Pri kvalitnejších a dátovo objemnejších fotkách je potrebné pripraviť aj ich náhľady
2) nahrať fotky a mať skript, ktorý ich a aj náhľady upraví podľa želania

Samozrejme prvá možnosť je náročnejšia, nevhodná pre bežných používateľov. Riešenie pre druhú variantu som na internete hľadal pomerne dlho. Keďže som nenašiel vyhovujúci a pritom jednoduchý skript, neostávalo mi iné, než si ho naprogramovať. Skript dokáže nasledovné:

 

1) pracovať so všetkými bežnými formátmi obrázkov (jpg, gif, png)
2) automaticky generovať a ukladať náhľadový obrázok na server podľa zvolených parametrov (rozmery a kvalita)
3) automaticky orez obrázkov podľa zvolených parametrov
4) možnosť nastavenia farby pozadia pri zmenšení obrázka
5) možnosť nastavenia vodoznaku
6) nastavenie pevného rozmeru jednej strany a automatické dopočítanie rozmeru druhej strany s ohľadom na pomer strán

Toto všetko je v jednom skripte a parametre sa nastavujú cez URL:

Príklady úpravy obrázka s názvom obrazok.jpg nachádzajúcim sa v priečinku adresár.

 

príklad nastavenia zmenšenia obrázka na náhľad s rozmerom 200 px šírka a 200 px výška. Skript vyberie najväčšiu možnú centrálnu časť obrázka a zvyšok sa automaticky odstráni. Výsledný obrázok je štvorec s rozmerom 200x200 px:

orez.php?cesta=adresar/obrazok.jpg&w=200&h=200

Automatická úprava obrázkov na webe

príklad nastavenia zmenšenia obrázka na náhľad s rozmerom 200 px šírka a 300 px výška a uloženie náhľadu. Skript vyberie najväčšiu možnú centrálnu časť obrázka a zvyšok sa automaticky odstráni. Ak je už vytvorený náhľad, zobrazí sa a neprebehne opätovné zmenšovanie. Ak má uložený náhľad iné rozmery, prepíše sa:

orez.php?cesta=adresar/obrazok.jpg&w=200&h=300&cache=1

príklad nastavenia zmenšenia obrázka na náhľad s rozmerom 200 px šírka a 200 px výška tak, aby nedošlo k orezu fotiek a zvyšná plocha obrázka bola sivá:

orez.php?cesta=adresar/obrazok.jpg&w=200&h=200&zoom=1&bg=e5e5e5

Automatická úprava obrázkov na webe

príklad nastavenia zmenšenia obrázka s pevne definovanou výškou 200 px a automaticky dopočítanou šírkou:

orez.php?cesta=adresar/obrazok.jpg&h=200&auto=1

príklad nastavenia zmenšenia obrázka s pevne definovanou šírkou 200 px a automaticky dopočítanou výškou:

orez.php?cesta=adresar/obrazok.jpg&w=200&auto=1

príklad nastavenia zmenšenia obrázka s pevne definovanou šírkou 200 px a automaticky dopočítanou výškou a kvalitou 60 percent:

orez.php?cesta=adresar/obrazok.jpg&w=200&auto=1&q=60

Jednotlivé parametre je možné medzi sebou kombinovať. Pre bezpečnosť a stabilitu webu je možné zadefinovať ochranný kľúč pozostávajúci zo série znakov, aby jednotlivé parametre nemohli byť menené inak, než je definované v samotnom webe:

orez.php?cesta=adresar/obrazok.jpg&key=abc123abc123

Vďaka týmto vlastnostiam je skript vhodný pre použitie k redakčnému systému. Zabezpečí spracovanie a úpravu obrázkov pre web tak, aby sa nenarušila štruktúra stránky a pritom originálne obrázky ostávajú nezmenené.

Chcete implementovať automatickú úpravu obrázkov do vášho webu, alebo máte záujem o uvdedený skript? Pokojne ma kontaktujte na jeden z uvedených e-mailov.

KOMENTÁRE

Meno *

E-mail

captcha

Odpíšte kód

Publikované: 11. 10. 2015 | prečítané: 930x | komentárov: (0) | tagy: redcon,php,
Hosting zadarmo od WebSupport.sk

Marlon Roudette - New Age

Kontakt
|
Vyhľadávanie
|
HTML5
|
CSS

webmaster: posta@dkubinsky.sk

štatistiky prístupov

Tvorba web stránok

Web stránky, e-shopy a aplikácie efektívne, funkčne, jednoducho - postavené na vlastnom redakčnom systéme.

Web stránky a E-shopy efektívne, funkčne, jednoducho...

Návrat hore