Orezanie a zmena veľkosti obrázkov pomocou tohto jednoduchého pluginu jQuery

Dynamické orezávanie obrázkov je jednoduchšie než kedykoľvek predtým vďaka knižniciam, ako je jQuery. Kódová základňa je ľahko použiteľná a komunita má tisíce doplnkov manipulácia s obrázkami.

Jeden taký plugin je plodina, free open-source riešenie orezania obrazu, ktoré sa zaoberá zoomovanie, orezanie, a dokonca ukladanie obrázkov.

Tento projekt je k dispozícii na GitHub s niektorými veľmi dlhá dokumentácia s desiatkami vlastných funkcií.

Cropper vám (vývojár) poskytuje úplnú kontrolu nad každým aspektom rozhrania. Môžete pracovať s 30 rôznych možností a 20+ vlastných metód zabudovaný do doplnku Cropper.

to je plne citlivý na dotyk, takže funguje na všetkých mobilných zariadeniach a podporuje posúvacie koliesko / trackpad na priblíženie a vyraďovanie fotografií. Používatelia môžu flip, točiť sa, mierka, a premiestniť fotografie kdekoľvek na plátne pred orezaním.

Plugin Cropper vyžaduje kópiu jQuery a to prichádza s dvomi súbormi: šablóna štýlov CSS a knižnica pluginov JavaScript. Stačí pridať tieto súbory na svoju stránku a malo by byť dobré ísť!

Nezabudnite, že tento nástroj prichádza s veľa funkcií. Online dokumentácia vám môže pomôcť, ale musíte si znečistiť ruky nastavenie poľa na nahrávanie obrázkov sami naučiť sa všetko. Ich vzorový kód len vyvedie všetko na konzolu a vyzerá takto:

 $ ('# image'), orezávač (aspectRatio: 16/9, orezanie: funkcia (e) // Výstup výsledkov pre orezanie obrazu. log (e.width), console.log (e.height), console.log (e.rotate), console.log (e.scaleX), console.log (e.scaleY);); 

Ale mali by ste sa naozaj pozrieť na živé demo aby ste videli, ako to všetko funguje.

Môžeš nájsť živé výstupné údaje súradníc X / Y, spolu s rozmerov obrázkov v blízkosti vrcholu. Cropper tiež obsahuje upload kde používateľ môže vybrať obrázok z počítača a začať orezávať priamo v prehliadači.

Živé miniatúry Aktualizácia v rohu, takže uvidíte, aký výsledný výsledok vyzerá pred uložením. Zmeniť pomer strán, výstupná kvalita, predvolená poloha plodiny, a celý rad ďalších.