Kivágás és a képek átméretezése ezzel az egyszerű jQuery pluginnel

Dinamikus képkivágás könnyebb, mint valaha köszönhetően a könyvtáraknak, mint a jQuery. A kódbázis könnyen használható, és a közösség több ezer pluginnal rendelkezik a képek kezelése.

Az egyik ilyen bővítmény Posztónyíró, egy szabad nyílt forráskódú képkivágási megoldás, amely kezeli nagyítás, növénytermesztés, sőt még képek mentése.

Ez a projekt elérhető a GitHub-on néhánnyal nagyon hosszú dokumentáció, több tucat egyedi funkcióval.

A Cropper (a fejlesztő) teljes körű ellenőrzést biztosít az interfész minden aspektusában. Tud dolgozni 30+ különböző lehetőség és 20+ egyéni módszerek beépített a Cropper pluginbe.

ez teljesen érintésérzékeny, így minden mobil eszközön működik, és támogatja a görgetőgörgőt / trackpadot a képek nagyításához és kicsinyítéséhez. A felhasználók is megfricskáz, forog, skála, és újrapozícionálás képek készítése előtt bárhol a vászonon.

A Cropper plugin megköveteli a jQuery másolatát és az két fájl található: CSS stíluslap és a JavaScript plugin könyvtár. Csak add hozzá ezeket a fájlokat az oldaladhoz, és jó legyen menni!

Ne feledje, hogy ez az eszköz jön nagyon jellemzői. Az online dokumentáció segíthet, de meg kell szereznie a kezét Képfeltöltő mező beállítása mindent megtanulni. A minta kódja csak mindent eljuttat a konzolhoz és így néz ki:

 $ ('# image'). növénytermesztő (aspectRatio: 16/9, crop: függvény (e) // Kinyomtatja az eredményadatokat a kép vágásához. console.log (ex); console.log (ey); konzol. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

De tényleg meg kell nézned a élő demó hogy hogyan működik ez.

Találhatod az X / Y koordináták élő kimeneti adatai, együtt a képméretek a tetején. A Cropper is tartalmaz egy feltöltési funkció ahol a felhasználó kiválaszthat egy képet a számítógépről, és a böngészőben jobbra vághat.

Élő miniatűrök frissítés a sarokban, így megnézheti, hogy a végeredmény hogyan néz ki a mentés előtt. Módosítsa a képarány, a kimeneti minőség, a alapértelmezett terménypozíció, és egy egész csomó.