Beskär och ändra storlek på bilder med denna enkla jQuery-plugin

Dynamisk bildskärning är enklare än någonsin tack vare bibliotek som jQuery. Codebase är lätt att använda och gemenskapen har tusentals plugins för hantera bilder.

En sådan plugin är Cropper, en fri uppladdningslösning med öppen källkod som hanterar zoomning, beskärning, och även spara bilder.

Detta projekt är tillgänglig på GitHub med vissa mycket lång dokumentation med dussintals anpassade funktioner.

Cropper ger dig (utvecklaren) fullständig kontroll över alla aspekter av gränssnittet. Du kan arbeta med 30 + olika alternativ och 20 + anpassade metoder inbyggd i Cropper-plugin.

Dess helt beröringskänslig, så det fungerar på alla mobila enheter och stöder rullhjulet / styrplattan för att zooma in och ut ur foton. Användare kan flip, rotera, skala, och ompositionera foton var som helst på duken före beskärning.

Cropper-plugin kräver en kopia av jQuery och det kommer med två filer: ett CSS-stilark och JavaScript-pluginbiblioteket. Lägg bara till dessa filer på din sida och det ska vara bra att gå!

Kom ihåg att detta verktyg kommer med mycket av funktioner. Online dokumentationen kan hjälpa dig, men du måste få dina händer smutsiga själv skapar ett bilduppladdningsfält att lära sig allt. Deras provkod bara matar ut allt till konsolen och ser något ut så här:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (e) // Utför resultatdata för beskärning av bild. console.log (ex); console.log (ey); console. logg (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Men du borde verkligen ta en titt på live-demo för att se hur allting fungerar.

Du kan hitta Live-utgångsdata för X / Y-koordinaterna, tillsammans med bilddimensioner nära toppen. Cropper innehåller också en ladda upp funktionen där användaren kan välja en bild från sin dator och börja beskära direkt i webbläsaren.

Live thumbnails uppdatera i hörnet, så du kan se hur slutresultatet ser ut innan du sparar. Ändra bildförhållande, de utskriftskvalitet, de standardgrödans position, och en hel massa mer.