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.