Kärbi ja suurenda pilte selle lihtsa jQuery pluginaga

Dünaamiline pildi kärpimine on lihtsam kui kunagi varem tänu raamatukogudele nagu jQuery. Kodeering on lihtne kasutada ja kogukonnal on tuhandeid pluginaid piltide käsitlemine.

Üks selline plugin on Cropper, tasuta avatud lähtekoodiga pildi kärpimise lahendus, mis tegeleb suumimine, kärpimine, ja isegi piltide salvestamiseks.

See projekt on saadaval GitHubis mõnedega väga pikk dokumentatsioon koos kümnete kohandatud funktsioonidega.

Cropper annab teile (arendajale) täieliku kontrolli liidese iga aspekti üle. Võite töötada 30 + erinevat valikut ja 20+ kohandatud meetodeid Cropperi pluginasse.

See on täielikult puutetundlik, seega töötab see kõikidel mobiilseadmetel ja toetab kerimisratast / juhtpuldi fotode suurendamiseks ja vähendamiseks. Kasutajad saavad seda teha klapp, pöörake, skaala, ja ümberpaigutamine fotosid enne lõuendit lõuendil.

Cropper plugin nõuab jQuery koopiat ja see kaasas kaks faili: CSS-laaditabel ja JavaScripti pluginate raamatukogu. Lihtsalt lisage need failid lehele ja see peaks olema hea minna!

Pea meeles, et see tööriist kaasas palju funktsioone. Online-dokumentatsioon võib aidata, kuid peate oma käed määrduma kujutise üleslaadimise välja ise seadistamine seda kõike õppida. Nende näidiskood on lihtsalt väljastab kõike konsoolile ja näeb välja selline:

 $ ('# image'). põllukultuur (aspectRatio: 16/9, kärpimine: funktsioon (e) // Väljundi tulemuse saamiseks kasutatavad tulemused. console.log (ex); console.log (ey); konsool. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Aga te peaksite tõesti kurkima live demo et näha, kuidas see kõik toimib.

Leiad X / Y koordinaatide reaalajas väljundandmed, koos pildi mõõtmed ülaosas. Cropper sisaldab ka üleslaadimise funktsioon kus kasutaja saab valida oma arvutist pildi ja alustada sirvimise õigust.

Live pisipildid värskendamine nurgas, nii et näete, milline on lõpptulemus enne salvestamist. Muuda kuvasuhe, the väljundi kvaliteet, the vaikekultuuride asend, ja terve hulk rohkem.