Obrezivanje i promijeniti veličinu slike s ovim jednostavnim jQuery Plugin

Izrezivanje dinamičke slike je lakše nego ikad zahvaljujući knjižnicama kao što je jQuery. Codebase je jednostavan za korištenje i zajednica ima tisuće dodataka za rukovanje slikama.

Jedan takav dodatak je Fijasko, slobodno otvoreno izvorno rješenje za obrezivanje slika koje rješava zumiranje, nicanje, pa čak i spremanje slika.

Ovaj projekt je dostupno na GitHubu s nekim vrlo duga dokumentacija s desecima prilagođenih značajki.

Cropper vam daje (developeru) potpunu kontrolu nad svim aspektima sučelja. Možeš raditi Više od 30 različitih opcija i 20 + prilagođenih metoda ugrađeni u dodatak za Cropper.

to je osjetljiv na dodir, tako da radi na svim mobilnim uređajima i podržava kotačić / trackpad za zumiranje i smanjivanje fotografija. Korisnici mogu drzak, rotirati, ljestvica, i premjestiti fotografija bilo gdje na platnu prije obrezivanja.

Dodatak Cropper zahtijeva kopiju jQuery i to dolazi s dvije datoteke: CSS stilova i biblioteka dodataka za JavaScript. Samo dodajte te datoteke na svoju stranicu i dobro bi vam bilo ići!

Zapamtite, ovaj alat dolazi s puno značajki. Online dokumentacija može pomoći, ali ćete morati uprljati ruke sami postavite polje za prijenos slika naučiti sve. Njihov uzorak kôda izlazi sve na konzolu i izgleda ovako:

 $ ('# image'). cropper (aspectRatio: 16/9, obrezivanje: funkcija (e) // Izlazni podaci za izrezivanje 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);); 

Ali, stvarno biste trebali zaviriti u demo uživo da biste vidjeli kako sve to funkcionira.

Možeš naći Live izlazni podaci X / Y koordinata, zajedno sa dimenzije slike blizu vrha. Cropper također uključuje značajka učitavanja gdje korisnik može odabrati sliku sa svog računala i početi obrezivanje u pregledniku.

Umanjene sličice uživo ažuriranje u kutu, tako da možete vidjeti kako izgleda krajnji rezultat prije spremanja. Alter the omjer, kvaliteta ispisa, zadani položaj usjeva, i cijela hrpa više.