1 2 Crop Image Menggunakan jquery jcrop + PHP Oleh: Agung Sucipto Assalamualaikum sobat jagocoding.com... kalo lagi free kerjaan baru bisa nulis lagi,...
Crop Image Menggunakan jQuery jCrop + PHP Oleh: Agung Sucipto
Assalamualaikum sobat jagoCoding.com... kalo lagi free kerjaan baru bisa nulis lagi, kali ini saya akan membuat tutorial yang masih ada hubungannya dengan image processing yaitu crop image / gambar menggunakan jquery jCrop dan Php. Baik langsung aja kita mulai. ada beberapa skenario yang akan kita lakukan, yaitu ...
Assalamualaikum sobat jagoCoding.com... kalo lagi free kerjaan baru bisa nulis lagi, kali ini saya akan membuat tutorial yang masih ada hubungannya dengan image processing yaitu crop image / gambar menggunakan jquery jCrop dan Php. Baik langsung aja kita mulai. ada beberapa skenario yang akan kita lakukan, yaitu : 1. Menyiapkan Library jQuery jCrop 2. Menyiapkan Image / Gambar contoh yang akan kita crop 3. menyiapkan interface untuk melakukan seleksi area croping 4. membuat processing php untuk output hasil crop. langsung saja kita mulai langkah-langkah dan penjelasannya :). siapkan direktory khusus project ini ya : /crop-image/ -jcrop (library jquery + jCrop ) -upload/ -index.php -proses.php -foto.jpg ( Gambar contoh yang akan di crop, ane males upload lagi :) ) kita mulai dari : index.php <script src="jcrop/jquery.min.js"> <script src="jcrop/jquery.Jcrop.js">
... kita memanggil core dari jquery dan library jCrop serta style dari jcrop nya, lalu kita akan membuat tampilan gambar dan form. FOrm disini digunakan untuk mengirimkan koordinat hasil jquery crop agar dapat diproses oleh PHP. <script src="jcrop/jquery.min.js"> <script src="jcrop/jquery.Jcrop.js"> dari kode diatas, saya menampilkan image menggunakan tag dengan src adalah contoh foto saya sendiri yaitu agung sucipto.jpg Catatan !!!
Tag tidak boleh diberi property width dan height. hal ini bertujuan agar jquery jcrop dapat membaca ukuran dimensi asli dari image data form diatas akan dikirimkan ke proses.php. dan di dalam form ada beberapa inputan dengan type hidden, ini bertujuan untuk sebagai parameter POST yang akan dikirim ke proses.php
type="hidden" type="hidden" type="hidden" type="hidden"
id="x" id="y" id="w" id="h"
name="x" name="y" name="w" name="h"
/> /> /> />
jadi inputan dengan type hidden itu akan diisi valuenya menggunakan jQuery melalui id masing-masing inputan. ● ● ● ●
ID(#) x untuk koordinat x ID(#) y untuk koordinat y ID(#) w untuk lebar (width) ID(#) h untuk tinggi (height)
sampai proses ini yang akan terlihat hanya seperti ini .
masih belum memiliki fitur select area crop. okke kita akan lanjutkan dengan penambahan scrip Jquerynya. taruh kode dibawah didalam tag <script type="text/javascript"> $(function(){ $("#cropbox").Jcrop({ aspectRatio: 200/300,
onSelect: updateCoords, minSize:[200,300] }); }); function updateCoords(c) { $("#x").val(c.x); $("#y").val(c.y); $("#w").val(c.w); $("#h").val(c.h); $("#act").removeAttr("disabled"); }; akan saya jelaskan maksud kode diatas $(function(){ $("#cropbox").Jcrop({ aspectRatio: 200/300, onSelect: updateCoords, minSize:[200,300] }); }); diatas kita memiliki element img dengan id cropbox, jadi agar element img tersebut dapat diproses oleh jqueryjCrop maka di inisialisasikan bawhwa element img dengan id cropbox akan menggunakan jQuery jCrop. untuk parameter didalam jCrop sebagai berikut : ●
●
●
aspectRatio: 200/300, ( di gunakan untuk rasio crop area seperti perbandinngan 4:3 / 16:9 tapi untuk aspecratio ini dapat menggunakan satuan px jadi 200/300 adalah ukuran dimensi dalam px) onSelect: updateCoords, (jadi ini nih yang akan mengupdatekoordinat ke form yang telah kita siapkan tadi) minSize:[200,300] ( ini untuk memberikan crop area terkecil, jadi kita bisa custom dalam satuan px)
Berikutnya fungsi untuk updateCoords :
function updateCoords(c) { $("#x").val(c.x); $("#y").val(c.y); $("#w").val(c.w);
$("#h").val(c.h); $("#act").removeAttr("disabled"); }; nah dari fungsi awal di jCrop akan memanggil fungsi ini, di fungsi ini hanya melakukan update value pada inputan dengan typr hidden dengan id yang sudah saya jelaskan tadi. terus ada tambahan untuk ,meremove disable tombol sumbit form. sampai disini sudah kelihatan hasil kerja kita .
kalo mau melihat apakah jquery nya berjalan apa tidak, coba saja arahkan cursor ke gambar, kalo cursor berubah jadi crop maka jquery berjalan.
dari sisi client kita sudah selesai, selanjutnya dari sisi Server proses.php
$info=pathinfo($src); $name=$new_name.".$info[extension]"; $new=$dir.$name; imagecopyresampled($dst_r,$img_r,0,0,$x,$y, $targ_w,$targ_h,$w,$h); imagejpeg($dst_r,$new,$jpeg_quality); } if(isset($_POST['crop'])){ $width=200; $height=300; $quality=50; $post='source'; $dir="upload/"; $info=pathinfo($dir.$_POST['source']); $new_name='crop_'.time(); $x=$_POST['x']; $y=$_POST['y']; $w=$_POST['w']; $h=$_POST['h']; crop($width,$height,$quality,$dir,$post,$new_name,$x,$y,$w,$h); echo''; } ?> saya akan menjelaskan satu persatu, check it out :) function crop($width,$height,$quality,$dir,$post,$new_name,$x,$y,$w,$h) { $targ_w = $width; $targ_h = $height; $jpeg_quality = $quality; $src = $_POST[''.$post.'']; $img_r = imagecreatefromjpeg($src); $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); $info=pathinfo($src); $name=$new_name.".$info[extension]"; $new=$dir.$name; imagecopyresampled($dst_r,$img_r,0,0,$x,$y, $targ_w,$targ_h,$w,$h); imagejpeg($dst_r,$new,$jpeg_quality); } diatas adalah fungsi dengan nama crop yang memiliki10 parameter yaitu 1. 2. 3. 4.
$width yaitu ukuran lebar output gambar yang diinginkan $height yaitu ukuran tinggioutput gambar yang diinginkan $quality yaitu input dengan 0-100 untuk menentukan kualitas output gambar $dir merupakan folder penyimpanan hasil croping
5. 6. 7. 8. 9. 10.
$post itu name dari gambar asli yang akan di crop (source) $new_name nama baru gambar hasil crop $x koordinat x dari form $y koordinat y dari form $w lebar gambar dari form $h tinggi gambar dari form
penjelasan script $img_r = imagecreatefromjpeg($src); kita akan menyalin dan mngcreate agung sucipto.jpg ke memory php agar kita dapat mengolah gambar $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); kemudian diberi setting dengan lebar dan tinggi yang sudah ditentukan $info=pathinfo($src); mengambil informasi detail dari gambar $name=$new_name.".$info[extension]"; membuat nama baru hasil crop beserta extension aslinya $new=$dir.$name; imagecopyresampled($dst_r,$img_r,0,0,$x,$y, $targ_w,$targ_h,$w,$h); imagejpeg($dst_r,$new,$jpeg_quality); disinilah gambar agung sucipto.jpg tadi diproses dengan koordinat x dan y yang sudah dipilih menggunakanjCrop. berikutnya proses saat data dikirim memalui form if(isset($_POST['crop'])){ $width=200; $height=300; $quality=50; $post='source'; $dir="upload/"; $info=pathinfo($dir.$_POST['source']); $new_name='crop_'.time(); $x=$_POST['x']; $y=$_POST['y']; $w=$_POST['w'];
$h=$_POST['h']; crop($width,$height,$quality,$dir,$post,$new_name,$x,$y,$w,$h); echo''; } jika terdapat kiriman $_POST dengan name crop maka lakukan proses berikut (cara baca if nya : ) ) kita tangkap semua kiriman dari post dan kita simpan kedalam variable dan panggil deh fungsi crop nya. jadi deh . dan outputnya sebagai berikut ni .
simple banget bukan? Quote "You can make powerfull script if you know that". Sampai jumpa dilain kesempatan, mau ngelanjutin project dlu. Assalamualaikum ....
Tentang Penulis
Agung Sucipto
Saya adalah alumni UIN SUSKA RIAU yang sangat gemar dan akrab sekali dengan web programming, bisa dikatakan walau koding itu rumit, tapi itulah passion saya
dengan id cropbox, jadi agar element img tersebut dapat diproses oleh jqueryjCrop maka di inisialisasikan bawhwa element img dengan id cropbox akan menggunakan jQuery jCrop. untuk parameter didalam jCrop sebagai berikut : ●