Obrezovanje in spreminjanje velikosti slik s tem preprostim vtičnikom jQuery

Obrezovanje dinamične slike je lažje kot kdajkoli, zahvaljujoč knjižnicam, kot je jQuery. Kodna baza je enostavna za uporabo in skupnost ima na tisoče vtičnikov rokovanje s slikami.

Eden takih vtičnikov je Cropper, brezplačno odprto kodno rešitev za obrezovanje slik, ki obravnava povečave, obrezovanje, in celo shranjevanje slik.

Ta projekt je GitHub z nekaterimi zelo dolga dokumentacija s številnimi funkcijami po meri.

Cropper daje (razvijalcu) popoln nadzor nad vsemi vidiki vmesnika. Lahko delaš 30 različnih možnosti in 20+ meri metode vgrajen v čep Cropper.

To je popolnoma občutljiv na dotik, zato deluje na vseh mobilnih napravah in podpira kolesce za pomikanje / sledilno ploščico za povečanje in pomanjšanje fotografij. Uporabniki lahko flip, zavrti, lestvice, in premestitev fotografije kjerkoli na platnu pred obrezovanjem.

Vtičnik Cropper zahteva kopijo jQuery in to prihaja z dvema datotekama: CSS stylesheet in knjižnica vtičnikov JavaScript. Samo dodajte te datoteke na svojo stran in dobro je, da greste!

Ne pozabite, to orodje je priloženo veliko značilnosti. Spletna dokumentacija vam lahko pomaga, vendar boste morali umazati roke sami nastavite polje za nalaganje slik naučiti vse. Njihova vzorčna koda odda vse na konzolo in izgleda približno tako:

 $ ('# image'). cropper (aspectRatio: 16/9, obrezovanje: funkcija (e) // Izhodne podatke za obrezovanje slike. console.log (ex); console.log (ey); log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Ampak, zares bi morali pokukati demo v živo da vidite, kako to deluje.

Lahko najdeš izhodni podatki v živo koordinat X / Y, skupaj z dimenzije slike blizu vrha. Cropper vključuje tudi funkcija nalaganja kjer lahko uporabnik izbere sliko iz svojega računalnika in začne brskanje desno v brskalniku.

Sličice v živo posodobitev v kotu, tako lahko pred shranjevanjem vidite, kako izgleda končni rezultat. Spremeni razmerje, izhodna kakovost, privzeti položaj pridelka, in cel kup še več.