Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Cropping Gambar menggunakan jQuery dan PHP. Cropping adalah sesuatu aksi untuk memotong bagian yang dipilih dari gambar asli. Software editor gambar seperti Photoshop akan selalu memiliki Cropping. Ketika kita membangun aplikasi untuk memanipulasi gambar, cropping adalah kebutuhan minimum.

Dalam artikel ini, kita akan membuat alat cropping dalam aplikasi web PHP untuk memotong gambar menggunakan jQuery. Saya telah menggunakan plugin Jcrop untuk mengimplementasikan fungsi pemangkasan gambar dinamis. Ini adalah plugin berbasis jQuery dan sederhana dan mudah diintegrasikan.

Dengan mengeksekusi contoh ini, gambar asli akan dimuat di halaman landing. Kita dapat memilih area pemangkasan dengan menggunakan event drag mouse. Setelah area  terpilih, maka dapat dimanipulasi dengan mengubah dimensi yang dipilih. Event klik tombol crop akan memicu eksekusi kode untuk mengembalikan  gambar untuk area yang dipotong. Data  ini akan ditetapkan sebagai sumber gambar yang dihasilkan.

Memuat Gambar Asli dalam Mode Pangkas

Ini adalah halaman awal yang memuat gambar asli. Pengguna dapat memilih dan mengelola batas seleksi dengan menggunakan event drag mouse. Halaman ini berisi tombol pemangkasan saat mengklik skrip jQuery akan dieksekusi untuk menyiapkan keluaran gambar terpangkas (menggunakan PHP) untuk menampilkannya ke browser.

Skrip jQuery untuk Mempersiapkan Sumber Gambar Terpotong

Skrip jQuery ini menangani pemilihan area terseleksi. Ketika pengguna memilih batas pemangkasan, maka koordinat area pemangkasan dan dimensi diindeks dengan menggunakan callback onSelect dari plugin Jcorp. Dalam skrip ini, saya telah menentukan opsi aspectRatio saat menginisialisasi plugin jCorp.

Data yang diindeks diteruskan ke file PHP untuk membuat gambar yang dipotong secara dinamis dengan menggunakan fungsi GD PHP. Sebelumnya, kita telah melihat cara membuat gambar menggunakan fungsi gambar PHP.

Kode PHP untuk Membuat Lapisan Gambar Dinamis ke Tampilan Gambar yang dipangkas

Kode PHP ini menerima dimensi dan koordinat gambar yang dipotong. Data-data ini digunakan dalam menciptakan lapisan gambar dinamis untuk memplot gambar yang terpotong di atasnya. Dengan mengatur tipe konten dengan menggunakan fungsi header PHP, gambar output akan ditampilkan ke browser.

Oke itulah tadi pembahasan saya tentang Cara Cropping Gambar menggunakan jQuery dan PHP, semoga bermanfaat. Untuk melihat hasilnya silahkan coba sendiri.