Apgrieziet un mainiet attēlus ar šo vienkāršo jQuery spraudni

Dinamiskā attēla apgriešana ir vieglāk nekā jebkad, pateicoties tādām bibliotēkām kā jQuery. Kodu bāze ir viegli lietojama, un kopienai ir tūkstošiem spraudņu attēlu apstrāde.

Viens šāds spraudnis ir Cropper, bezmaksas atvērtā pirmkoda attēlu apgriešanas risinājums, kas apstrādā tālummaiņa, apgriešana, un pat saglabājot attēlus.

Šis projekts ir pieejams GitHub ar dažiem ļoti ilgstoša dokumentācija ar desmitiem pielāgotu funkciju.

Cropper sniedz jums (attīstītājam) pilnīgu kontroli pār katru saskarnes aspektu. Jūs varat strādāt ar 30 + dažādas iespējas un 20 + pielāgotas metodes iebūvēts Cropper spraudnī.

Tas ir pilnībā skārienjutīgs, tā darbojas visās mobilajās ierīcēs un atbalsta ritināšanas ritenīti / trackpad, lai tuvinātu un izņemtu fotoattēlus. Lietotāji var uzsist, pagriezt, mērogā, un pārvietošana fotoattēlus jebkurā vietā uz audekla pirms apgriešanas.

Cropper spraudnis nepieciešama jQuery kopija un tā nāk ar diviem failiem: CSS stilu un JavaScript spraudņa bibliotēku. Vienkārši pievienojiet šos failus savai lapai, un tas būtu labi iet!

Atcerieties, ka šis rīks tiek piegādāts daudz funkcijas. Tiešsaistes dokumentācija var palīdzēt, bet jums būs jāiegūst rokas paša attēla augšupielādes lauka iestatīšana lai to visu iemācītos. Viņu paraugu kods tikai izvada visu uz konsoli un izskatās šādi:

 $ ('# image'). Kultivētājs (aspectRatio: 16/9, crop: funkcija (e) // Rezultātu datu sagriešana attēla apgriešanai. console.log (ex); console.log (ey); konsole. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Bet jums patiešām būtu jāpievērš uzmanība tiešraides demonstrācija lai redzētu, kā tas viss darbojas.

Tu vari atrast X / Y koordinātu tiešie izejas dati, kopā ar attēla izmēri netālu no augšas. Cropper ietver arī augšupielādes funkcija kur lietotājs var izvēlēties attēlu no sava datora un sākt apgriešanu tieši pārlūkprogrammā.

Live sīktēli atjauninājums stūrī, lai jūs varētu redzēt, kāds ir gala rezultāts pirms taupīšanas. Mainiet attēla attiecība, the izvades kvalitāte, the noklusējuma kultūraugu stāvoklis, un vairāk ķekars.