Apkarpykite ir pakeiskite vaizdus naudodami šį paprastą „jQuery“ papildinį

Dinaminis vaizdo apkarpymas yra lengviau nei bet kada dėka bibliotekų, tokių kaip jQuery. Kodo bazė yra paprasta naudoti ir bendruomenei yra tūkstančiai papildinių tvarkyti vaizdus.

Vienas iš tokių papildinių yra Cropper, nemokamą atviro kodo vaizdo apkarpymo sprendimą, kuris tvarko priartinimas, apkarpymas, Ir netgi išsaugoti vaizdus.

Šis projektas yra galima rasti „GitHub“ su kai kuriais labai ilga dokumentacija su dešimtimis pasirinktinių funkcijų.

„Cropper“ suteikia jums (kūrėjui) visišką visų sąsajos aspektų kontrolę. Galite dirbti 30 + skirtingų variantų ir 20+ pasirinktiniai metodai įterptas į Cropper įskiepį.

Tai visiškai jautrus jutikliui, todėl jis veikia visuose mobiliuosiuose įrenginiuose ir palaiko slinkties ratuką / trackpad, kad padidintumėte ir sumažintumėte nuotraukas. Vartotojai gali apversti, pasukti, skalė, ir perkelti nuotraukos prieš bet kokį drobės vaizdą prieš apkarpymą.

„Cropper“ papildinys reikia jQuery kopijos ir tai Su dviem failais: CSS stilių lentelė ir „JavaScript“ papildinio biblioteka. Tiesiog pridėkite šiuos failus į savo puslapį ir tai turėtų būti gerai eiti!

Atminkite, kad šis įrankis yra daug funkcijų. Internetinė dokumentacija gali padėti, bet jums reikės nuvalyti rankas patys nustatyti vaizdo įkėlimo lauką išmokti viską. Jų pavyzdinis kodas veda viską į konsolę ir atrodo taip:

 $ ('# image'). Kultivatorius (aspectRatio: 16/9, crop: function (e) // Išvesties rezultato duomenis apkarpymui. console.log (ex); console.log (ey); konsolė. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Bet jūs tikrai turėtumėte žiūrėti į gyva demonstracija pamatyti, kaip visa tai veikia.

Tu gali rasti X / Y koordinačių tiesioginiai išvesties duomenys, kartu su vaizdo matmenys šalia viršaus. Cropper taip pat apima įkėlimo funkcija kur vartotojas gali pasirinkti vaizdą iš savo kompiuterio ir pradėti apkarpyti tiesiai naršyklėje.

Tiesioginės miniatiūros atnaujinti kampe, kad galėtumėte matyti, kaip galutinis rezultatas atrodo prieš išsaugant. Pakeiskite vaizdo santykis, produkcijos kokybė, numatytoji pasėlių padėtis, ir daugiau krūva.