Tanam dan Saizkan Imej Dengan Plugin jQuery Mudah ini

Penanaman imej dinamik lebih mudah terima kasih kepada perpustakaan seperti jQuery. Kod pangkalan mudah digunakan dan komuniti mempunyai beribu-ribu plugin untuk mengendalikan imej.

Salah satu plugin itu Cropper, penyelesaian tanaman sumber terbuka sumber terbuka yang mengendalikan zum, tanaman, dan juga menyimpan imej.

Projek ini adalah boleh didapati di GitHub dengan sedikit sangat dokumentasi yang panjang dengan berpuluh-puluh ciri tersuai.

Cropper memberikan kepada anda (pemaju) kawalan sepenuhnya ke atas setiap aspek antara muka. Anda boleh bekerjasama 30+ pilihan yang berbeza dan 20+ kaedah tersuai dibina ke dalam plugin Cropper.

Ia sentuhan sensitif sepenuhnya, jadi ia berfungsi pada semua peranti mudah alih dan menyokong roda tatal / pad jejak untuk zum masuk & keluar dari foto. Pengguna boleh flip, berputar, skala, dan reposition gambar di mana sahaja di kanvas sebelum tanaman.

Plugin Cropper memerlukan salinan jQuery dan ia datang dengan dua fail: lembaran gaya CSS dan perpustakaan plugin JavaScript. Hanya tambah fail-fail ini ke halaman anda dan ia sepatutnya baik untuk pergi!

Ingat, alat ini datang dengan banyak ciri-ciri. Dokumentasi dalam talian boleh membantu tetapi anda perlu mendapatkan tangan anda kotor menubuhkan medan upload imej anda sendiri untuk belajar semuanya. Kod sampel mereka hanya mengeluarkan segalanya ke konsol dan kelihatan seperti ini:

 $ ('# image'). cropper (aspectRatio: 16/9, crop: function (e) // Output data hasil untuk crop crop image, 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);); 

Tetapi, anda harus benar-benar mengambil mengintip di demo hidup untuk melihat bagaimana semua ini berfungsi.

Awak boleh cari data output langsung koordinat X / Y, bersama dengan dimensi imej berhampiran bahagian atas. Cropper juga termasuk muat naik ciri di mana pengguna boleh memilih imej dari komputer mereka dan mula memangkas tepat di dalam penyemak imbas.

Imej kecil langsung kemas kini di sudut, jadi anda dapat melihat hasil akhir seperti sebelum menyimpan. Alihkan Nisbah aspek, yang kualiti output, yang kedudukan tanaman lalai, dan sebilangan besar lagi.