Pangkas dan Ubah Ukuran Gambar Dengan Plugin jQuery Ini Sederhana

Pemotongan gambar dinamis lebih mudah dari sebelumnya berkat perpustakaan seperti jQuery. Basis kode mudah digunakan dan komunitas memiliki ribuan plugin menangani gambar.

Salah satu plugin tersebut adalah Keruntuhan, solusi pemangkasan gambar sumber terbuka gratis yang menangani zooming, tanam, dan bahkan menyimpan gambar.

Proyek ini adalah tersedia di GitHub dengan beberapa sangat dokumentasi panjang dengan puluhan fitur khusus.

Cropper memberi Anda (pengembang) kontrol penuh atas setiap aspek antarmuka. Anda bisa bekerja dengannya 30+ opsi berbeda dan 20+ metode khusus dibangun ke dalam plugin Cropper.

Nya sepenuhnya sensitif terhadap sentuhan, sehingga bekerja pada semua perangkat seluler dan mendukung roda gulir / trackpad untuk memperbesar dan memperkecil foto. Pengguna bisa membalik, memutar, skala, dan reposisi foto di mana saja di kanvas sebelum memotong.

Plugin Cropper membutuhkan salinan jQuery dan itu dilengkapi dengan dua file: CSS stylesheet dan pustaka plugin JavaScript. Cukup tambahkan file-file ini ke halaman Anda dan itu harus baik untuk pergi!

Ingat, alat ini dilengkapi dengan banyak fitur. Dokumentasi online dapat membantu tetapi Anda harus membuat tangan Anda kotor menyiapkan sendiri bidang unggahan gambar untuk mempelajari semuanya. Kode sampel mereka saja menampilkan semuanya ke konsol dan terlihat seperti ini:

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

Tapi, Anda harus benar-benar mengintip demo langsung untuk melihat bagaimana semua ini bekerja.

Kamu dapat menemukan data hasil langsung dari koordinat X / Y, Bersama dengan dimensi gambar di dekat bagian atas. Cropper juga termasuk fitur unggah di mana pengguna dapat memilih gambar dari komputer mereka dan mulai memotong tepat di browser.

Thumbnail langsung perbarui di sudut, sehingga Anda dapat melihat seperti apa hasil akhirnya sebelum menyimpan. Ubah rasio aspek, itu kualitas keluaran, itu posisi pemotongan default, dan banyak lagi.