Beskær og resize billeder med dette enkle jQuery-plugin

Dynamisk billede beskæring er nemmere end nogensinde takket være biblioteker som jQuery. Codebase er nem at bruge, og samfundet har tusindvis af plugins til håndtering af billeder.

Et sådant plugin er Cropper, en gratis open source image beskæring løsning, der håndterer zoome, beskæring, og endda gemmer billeder.

Dette projekt er tilgængelig på GitHub med nogle meget lang dokumentation med snesevis af brugerdefinerede funktioner.

Cropper giver dig (udvikleren) fuldstændig kontrol over alle aspekter af grænsefladen. Du kan arbejde med 30 + forskellige muligheder og 20 + brugerdefinerede metoder indbygget i Cropper plugin.

Det er fuldt berøringsfølsom, så det virker på alle mobile enheder og understøtter rullehjulet / styrefladen for at zoome ind og ud af billeder. Brugere kan flip, rotere, vægt, og repositionere fotos hvor som helst på lærredet før beskæring.

Cropper-plugin'et kræver en kopi af jQuery og det leveres med to filer: et CSS stilark og JavaScript plugin bibliotek. Tilføj blot disse filer til din side, og det skal være godt at gå!

Husk, dette værktøj kommer med en masse af funktioner. Online dokumentation kan hjælpe, men du skal få dine hænder snavset selv oprettelse af et billedupload felt at lære det hele. Deres prøvekode bare output alt til konsollen og ser sådan ud:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (e) // Udfør resultatdataene til beskæring af billede. console.log (ex); console.log (ø); konsol. log (e.width); console.log (e.height); console.log (e.rotale); console.log (e.scaleX); console.log (e.scaleY);); 

Men du bør virkelig kigge på live demo for at se, hvordan alt dette virker.

Du kan finde live output data af X / Y koordinaterne, sammen med billed dimensioner nær toppen. Cropper indeholder også en upload funktion hvor brugeren kan vælge et billede fra deres computer og starte beskæring direkte i browseren.

Live thumbnails opdatering i hjørnet, så du kan se, hvad slutresultatet ser ud, før du gemmer. Ændre aspektforhold, det output kvalitet, det standard afgrødestilling, og en hel masse mere.