Ořez obrázků pomocí JavaScriptu a PHP

18.06.2005 17:26

Základní informace

Náhled ořezávátka Během dnešního dne jsem zkompletoval poměrně jednoduchý JavaScript, pomocí kterého je možné vytvářet výřezy z obrázků.

Nejlepší využití tohoto skriptu je např. v administračním rozhraní při ořezávání obrázků nebo na webu, na kterém uživatelé pracují s obrázky.

Sám o sobě JavaScript fotku nevyřízne, k tomu potřebujete nějaký skriptovací (nebo programovací) jazyk jako je např. Python, PHP nebo ASP kterým zpracuje souřadnice předané “ořezávátkem”.

Jak skript pracuje?

Skript je napsán pomocí jednoduchého objektového modelu, takže jeho začlenění do stránky je snadné a lze provést během několika okamžiků:

1. Prolinkování na externí javascript:

<script type=\"text/javascript\" src=\"js/imageCropper.js\"></script>

2. Určení formuláře

Aby mohl vůbec skript fungovat, tak musí být ve stránce formulář, do kterého se dynamicky vytvoří následující hidden proměnné:

  • crop[imgId][n][x1]
  • crop[imgId][n][y1]
  • crop[imgId][n][x2]
  • crop[imgId][n][y2]
  • crop[imgId][n][w]
  • crop[imgId][n][h]

Kde imgId je parametr ID ořezávaného obrázku, n je číslo ořezávacího rámečku (0-n).
Proměnné x1, y1, x2, y2 nesou informace o začátku a konci ořezávacího rámečku v pixelech.
Proměnné w a h nesou informaci o cílové velikosti obrázku.

To provedeme zavoláním metody “useForm” s parametrem nesoucí název formuláře:

<script type=\"text/javascript\">
	imageCropper.useForm('cropForm');
</script>

3. Určení samotného obrázku pro ořez a stanovení parametrů

Posledním krokem za volaní metody “addCroper“, která akceptuje následující parametry:

  • ID:
    ID obrázku, na kterém se má ořezávátko vytvořit
  • width:
    výchozí šířka ořezávátka
  • height:
    výchozí výška ořezávátka
  • ratio
    určuje, zda zvětšování / zmenšování bude probíbat se zachováním poměru stran.
    nepovinná, akceptuje hodnotu “fixed” nebo null.
  • bColor
    určuje barvu rámečku pro ořez.
    nepovinná, akceptuje hodnoty barev HEXa (např. 0f0) nebo null.

Parametr ratio s hodnotou “fixed” znamená, že zvětšování rámečku bude probíhat se zachováním poměru stran a proměnné crop[imgId][n][w] a crop[imgId][n][h] budou obsahovat zadané hodnoty proměnných width a height.

Pokud během zvětšování zmáčknete klávesu shift, pak se bude zachovávat poměr stran.

Tuto metodu lze zavolat N-krát, což znamená, že na jednom obrázku je možné zároveň pracovat s několika rámečky. Stejně tak je možné přidávat ořezávátko na více obrázků na jedné stránce, ale každý obrázek musí mít unikátní ID.

<script type=\"text/javascript\">
	imageCropper.addCroper('obrazek',100,300,null,'0f0');
	imageCropper.addCroper('obrazek',240,160,'fixed');
</script>

Kompatibilita prohlížečů

Tento skript funguje v IE5.x, IE6, Mozilla, Firefox. V Opeře 8.x trošku zlobí, ale je zcela funkční. Další prohlížeče jsem netestoval.

Příklad

Na adrese www.chose.cz/priklady/orez-obrazku/ si můžete prohlédnout příklad použití. Pokud vám nebude cokoliv jasné, ptejte se v diskusi.

Komentáře k příspěvku 'Ořez obrázků pomocí JavaScriptu a PHP'

  1. Jódlující bernardýn:

    Dobrý! Nechtěl bys ještě udělat skript, který by ke každé fotce, nahrané na server, přidal obrázkový rámeček třeba z Paint Shop Pro?

  2. Jan Korbel:

    Skvělej skriptík, díky, žes ho zveřejnil.

  3. Alex:

    VELMI ZAJÍMAVÁ PRÁCE!!!!!

  4. Chose:

    2 Jódlující bernardýn:
    Ja bohuzel nevim, jak vypada rámeček třeba z Paint Shop Pro, ale urcite je mozne temer cokoliv te napadne.

    2 Jan Korbel, Alex:
    Diky :)

    Ohledne samotneho skriptu - mam rozpracovanou verzi, ktera umi zvetsovani / zmensovani ve vsech smerech (jako ve Photoshopu), ale zatim je narocna na CPU, takze to musim jeste trosku poladit.

  5. Erix:

    Pekne, diky! Zrovna rozpracovavam jeden free projektik, kde by se to dalo vyuzit. Jestli to dokoncim a pouziju, budes v “Thanx to…” :-)

  6. dgx:

    Hezké, šikovné, gratuluji ke svěle odvedené práci! :-)

    Možná by nebylo špatné řešit barvu (resp. styl) rámečku také parametrem, protože bílá čára nemusí být vždy ideální. Koneckonců, i v uvedeném příkladu by zelená 0f0 byla lepší

  7. Chose:

    2 dgx:
    Myslim, ze neni vubec zadny problem rozsirit metodu addCropper o dalsi parametr, pripadne parametry.

    Volitelna barva ramecku je velmi dobry napad, to by pomohlo i v pripade, ze mame vice ramecku, takze kazdy by mohl mit svou barvu a potom se budou jednotlive formaty lepe odlisovat.

    Diky za tip!

    UPDATE:
    Tak jsem provedl aktualizaci skriptu, ktery nyni umoznuje menit barvu ramecku. Ale je potreba myslet i na “resize” obrazky, ktere je treba pro kazdou barvu vytvorit.

  8. Mordae:

    Brilantní! Něco takového jsem potřeboval :-)

  9. kvezt:

    zdravim chose,
    pekny scriptik - hlasim 100% funkcnost v Safari (IE5.2:mac snadartne vubec nezvlada:/)
    dalsi mouznou feature by mohlo byt posouvani o pixely pomoci sipek klavesnice;
    jen houst a vetsi kapky.)
    j.

  10. dusoft:

    Dobry skript, aj ked som uplne rovnaku vec videl na webe viackrat. Konkretne na jednej svajciarskej domene.

  11. Chose:

    2 kvezt:
    zdar chlape,
    diky za overeni v Safari. Ten napad s tema klavesama neni spatny, jen si nejsem jist, jak to vyresit v pripade, ze mas nekolik ramecku zaroven? Ze by se bral jako aktivni posledni, na ktery uzivatel klikl?

    2 dusoft:
    Jiste, to je mozne, existuje vice ci mene zajimavych druhu reseni, ale neni nad vlastni :)

  12. dusoft:

    a hlavne odskusanie si schopnosti ;-)

  13. Jan Brašna:

    No tyo, super práce, už jsem dlouho o něčem podobném uvažoval, protože to budu potřebovat, tak jsem trochu po vzoru jiných systému začal dělat na flashové verzi, ale díky tomuhle ji můžu s klidem odložit. Díky moc!

    Ad všechny směry a klávesnice) To by taky bylo super!

    Jinak potvrzuji jak Safari 2.0 na Tygrovi, tak Safari 1.2.4 (tady trochu obrázek krade focus při drag’n'dropu, ale funguje to) a Camino 0.8 (tady se zas trochu špatně překresluje rámeček a nechává stopu) na Panterovi.

  14. Petr:

    Taky se musím přidat k uznání za zajímavý skript

  15. Fred:

    Tak to je bomba, BTW na podlob.com je drag slideshow, co zobrazuje obrázky podobným způsobem a vždy se mi moc líbilo. Jen se mi zdálo k ničemu nepoužitelné a něco takového by mě ani ve snu nenapadlo.

  16. Fred:

    Uf teď to po sobě čtu a vypadá to jako bych chtěl říci něco jiného. Takže na tom odkazu je úplně jiný script, který nemá kódově s tímto nic společného .

  17. spaze:

    Wow, dost dobra prace. Mozna by bylo jeste dobry pridat nejaky info o tom, jak je velkej aktualni crop region a treba jeste moznost tu velikost nastavit rucne (napr. chci 320x200 vyrez, ale rucne bych to natahovat asi nechtel). Na src jsem nekoukal, takze pokud uz tam neco podobnyho je, omlouvam se. Ale jak uz jsem rikal, mazec :)

  18. Štěpán Svoboda:

    Fakt pecka…

  19. joe:

    Paradni prace. Akorat ted zkousim rozchodit to orezavani na vicero obrazcich na jedne strance (jeden form) a to se mi nedari. Obdelnik pro orez se v obrazcich pocinaje druhym jiz nezobrazuje nad nim nybrz vlevo nahore na strance. Nenapada Vas v cem muze byt problem? Diky.

  20. Chose:

    2 joe:

    Tak to je podivne, zkousel jsem to na “ciste” strance bez CSS a jde to bez problemu. Nemuze pozicovani nejak ovlivnovat definice stylu na strance, kde mas orezavatko?

  21. Spike:

    2 dusoft:
    těma svycarskyma strankama jsi asi myslel www.tillate.com
    ja jsem pouzil podobnou vec na http://www.partypics.cz

  22. Chose:

    2 joe:
    udelal jsem novou verzi orezavatka, v predchozi byl opravdu problem s vice obrazky na jedne strance. Nyni je schopen pracovat s libolnym poctem obrazku a pocet orezavacich ramecku.

  23. Bernie:

    Skvelej tool, vsechna cest….

  24. Wizzard:

    nevim kam to sem na stranky napsat, tak se zeptam tady… jakej je dobrej editor na psani javascriptu? rad bych nejakej s vyberem moznosti a ne jenom se zvyraznovanim syntaxe. dik moc

  25. dédétéčko:

    Skvělé, némá to nic víc ani nic míň a hlavně to funguje. díky. Koukal jsem na kód - nejsem javaskriptař, ale kupodivu jsem mu i rozumněl. Kdyby tam šlo ještě dodělat pár vychytávek jako změnu rozměrů obrázků viz ZDE, křičel bych blahem a milerád bych se Vám odměnil dle vašich potřeb a požadavků. Tak mě kdyžtak kontaktujte. dik.

  26. naith:

    To je opravdu super. Začal jsem na podobné věci pracovat, ale toto mi ušetří spoustu času. Mám jeden dotaz. Chtěl bych to využít i pro komerční weby. Prosím pošli mi Tvé podmínky pro užití skriptu. Díky

  27. Chose:

    Licence je LGPL, viz cesky preklad na http://www.gnu.cz/article/34/

  28. visir:

    Testoval jsem to v NN6 a NN8, obojí bez problémů Opera 8.02 bez problémů. IE a FF už jsuo uvedeny výš.
    Jinak: chválili všichni přede mnou, musím se přidat taky.

  29. Acko:

    Taky se přidám k pochvale. Já jsem si ten skript dovolil tošku ohnout přes koleno a a zneužít k jinému účelu než byl stvořen. Tímto chci poděkovat autorovi.
    Acko

  30. Jiří Pospíšil:

    Velice dobrý skript, díky!

  31. Big_G:

    Zdravím.
    Mám dotaz.
    Lze nějak jeden z rámečků odstranit?
    Jde mi o to, že obrázek je ve formuláři a lze jej tedy měnit pomocí
    Pokud změním obrázek, zůstává vidět vybraná část obrázku původního.Pokud zavolám funkci addcroper znovu, sice se překryje novým obrázkem a výběrem, ale ten původní výběr zůstává.
    Abych to shrnul.
    Potřebuji pevně danou velikost výběru na obrázku, který chce uživatel nahrát na web. To jsem již zajistil potřebnými parametry předanými při volání funkce a odstraněním možností resize (směrů). Potřebuji ale jen jeden výběr a to u obrázku, který lze měnit (vybrat jiný obrázek i několikrát za sebou, dokud není uživatel spokojen).Náhled se mění v js, který je volán z input type=”file” metodou onChange.

    Díky za odpověď.

  32. Big_G:

    Jde mi o to, že obrázek je ve formuláři a lze jej tedy měnit pomocí input type=”file”

  33. ATom:

    Narazil jsem na dva problémy, především se nikde nepíše, že obrázek musí být uzavřen , jinak to v Exploreru hází nějakou chybu při změně velikosti výřezu. Jinde je to OK. Ale i poté, co jsem to tam přidal, se Explorer chová divně. Při posunu jako kdyby se něco znovu přenačítalo. Ve spodní liště Exploreru se vypisuje to “(Zbývá 1 položka)” a cele se to posunuje hrozně pomalu. Ale zde na webu to nedělá, zatím jsem nepřišel na to, čím to je.

  34. Venda:

    Opravdu užitečný nástroj

  35. Ełven:

    neznate nekdo podobny scriptik, ktery by jel pod ASP? popr. nejaky free java applet, ktery by se dal do ASP aplikace zakomponovat?

  36. jbot:

    sorry, english only…..

    72dpi == :)

    300dpi == :(

  37. jbot:

    nevermind..

    300dpi == :)

  38. Davis:

    Velmi pěkný a hlavně zajímavý skript, škoda že jsem nenašel místo na svém webu kde bych ho mohl použít.

  39. Michalek:

    Super věcička. Přidal jsem si do skriptu i názvy jednotlivých boxíků a možnost zadat jim výchozí pozici. Takže se při načtení boxíky rozloží tak, jak již mají zadáno v databázi, následně upravím pozice a aktualizuju v databázi.

    Kód je psanej srozumitelně i pro BFU v oblasti JavaScriptu, takže díky!

  40. Ondra:

    :) je to pekne, resp, super… ale chtelo by to umet jeste zmenu velikosti, pokud bych to zaradil do obsluhy nejake fotogalerie, je celkem pravdepodobne ze tam lidi poslou obrovsky obrazky (co se trebe nevejdou na screen) a pak je budu potrebovat zmensit na rozumnou velikost, abych jim dal moznost to oriznout

    Staci naznak jak to udelal, za cokoliv sem vdecny ;) ondra@dew.cz

  41. ZtF:

    Mile, pekne, prime reseni…
    Nedavno jsem resil podobny problem a nakonec jsem se rozhodl pouzit toto API: http://www.walterzorn.com/dragdrop/dragdrop_e.htm + knihovnu z http://php.amnuts.com/ (ma tam i interface postaveny prave na tomto JS API). Mno… a prostoduchy skriptik vyuzivajici vyse zminene API pro zmenu velikosti obrazku uz jsem si dopsal sam. Teoreticky by slo vyuzit pridruzene metody, ale… zadna se mi “nelibila” resp. nehodila uplne a psat rozsirujici tridu se mi nechtelo :)