Crop Image Interaktif pada Halaman Web dengan JQuery ImageAreaSelect Upload Crop (Pemrograman Web PHP JQuery)

Beberapa hari yang lalu ada teman yang menceritakan bahwa di Website SNMPTN ada fasilitas Mengupload Foto Pendaftaran kemudian secara Online Interaktif On The Fly Pengguna langsung Memilih Area yang Akan Di-Crop dan Menyimpan atau Upload Hasilnya sebagai Foto yang Akan Digunakan untuk Mendaftar. Setelah searching sana kemari, hasilnya ketemu teknik serupa dengan nama JQuery Image Area Select.

Website dari JQuery ImageAreaSelect dapat ditemukan disini http://odyniec.net/projects/imgareaselect/. Demonya terlihat sebagai berikut :

Sedangkan library JQuery Image Area Select dapat didownload disini http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.8.zip.

Tetapi demo atau contoh pada website di atas tidak membahas atau memberikan cara untuk Mengupload Gambar hasil Pilihan Area Crop. Kemudian Pertanyaannya Bagaimana Cara Menyimpan atau Upload Gambar Hasil yang Telah Di-Crop. Ternyata penulis menemukan disini, beserta demonya :



http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Kemudian untuk projectnya dapat didownload disini : http://www.webmotionuk.co.uk/jquery/jquery_upload_cropv1.2.zip

Setelah dijalankan akan muncul tampilan sebagai berikut, Browse File Gampar. Klik Upload. Kemudian pihih Area Gambarnya. Kemudian klik Save Thumbnail :

Maka hasilnya bisa didapatkan tersimpan pada Directory Web pada Server Web htdocs/www, folder upload_pic :

Koleksi Project disini adalah koleksi backup inventaris pribadi penulis. Apabila tertarik untuk mendownload Library Projectnya silakan download pada link-link di atas.

Semoga bermanfaat.