Untuk membuat kode ini lebih sederhana, kita harus menggabungkan contoh upload file PHP dan contoh Crop gambar jQuery secara bersamaan. Jadi, form dengan opsi upload file digunakan untuk memilih file gambar dan mengunggah file biner ke kode PHP.

Di file PHP, data array $ _FILES diterima dan file yang diunggah dipindahkan ke target yang ditentukan. Saat unggahan berhasil, pratinjau gambar ditampilkan dan fungsi crop diinisialisasi dengan referensi elemen pratinjau.
Formulir HTML dengan Opsi Upload Gambar

Kode ini digunakan untuk membuat form HTML dengan input file untuk membiarkan pengguna memilih dan mengunggah file gambar. Setelah memproses skrip upload gambar PHP, pratinjau gambar yang diunggah ditunjukkan dengan elemen gambar HTML. Referensi elemen ini digunakan untuk menginisialisasi opsi library Jcrop.

Script Upload Gambar PHP

Ini adalah kode unggah file biasa dalam PHP yang sangat akrab bagi kita seperti yang telah kita lihat di banyak contoh upload file. Fungsi PHP move_uploaded_file memindahkan file yang diunggah ke target yang ditentukan. Setelah pengunggahan gambar selesai, maka kode PHP akan menampilkan pratinjau dari gambar yang diunggah.

jQuery Based Jcrop Library Initialization untuk Mengaktifkan

Alih-alih mengacu pada elemen gambar statis, Jcrop diinisialisasi dengan gambar yang diunggah secara dinamis. Pratinjau gambar yang diunggah disebut dengan atribut id. Id ini kemudian digunakan dalam skrip jquery untuk menginisialisasi properti library jCrop untuk memanggil fungsi pemangkasan. Ini memungkinkan fitur pemangkasan pada elemen gambar pratinjau dimuat secara dinamis pada pengunggahan gambar.

Unggah dan Pangkas Gambar menggunakan PHP dan jQuery – Output

Screenshot berikut menunjukkan output dari contoh ini untuk membuat upload gambar PHP untuk mengaktifkan fitur pemangkasan pada gambar yang diunggah.

Upload dan Crop Gambar menggunakan PHP dan jQuery

OKe itulah tadi pembahasan saya tentang Upload dan Crop Gambar menggunakan PHP dan jQuery, semoga bermanfaat.