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 ...

Crop Image Menggunakan jQuery jCrop + PHP

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

<html>
	<head>
		<script src="jcrop/jquery.min.js"></script>
		<script src="jcrop/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="jcrop/jquery.Jcrop.css" type="text/css" />
	</head>
	<body>
		...
	</body>
</html>

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.

<html>
	<head>
		<script src="jcrop/jquery.min.js"></script>
		<script src="jcrop/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="jcrop/jquery.Jcrop.css" type="text/css" />
	</head>
	<body>
		<form action="proses.php" method="POST">
			<center>
			<img src="agung sucipto.jpg" id="cropbox"/>
			</center>
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="w" />
			<input type="hidden" id="h" name="h" />
			<input type="hidden" name="source" value="agung sucipto.jpg"/>
			<br/>
			
			<center>
				<p>Potong Gambar sesuai ukuran yang dibutuhkan, Lalu Klik Crop & Selesai</p>
				<span class="input-group-btn">
				<button type="submit" id="act"  disabled="disabled" name="crop"><i class="icon-crop"></i> Crop & Selesai</button>
			</center>
		</span>
		</form>
	</body>
</html>

dari kode diatas, saya menampilkan image menggunakan tag <img/> dengan src adalah contoh foto saya sendiri yaitu agung sucipto.jpg

Catatan !!!
Tag <img/> 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

<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" 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 <head>

<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");
	};
</script>

akan saya jelaskan maksud kode diatas

$(function(){
	$("#cropbox").Jcrop({
	aspectRatio: 200/300,
	onSelect: updateCoords,
	minSize:[200,300]
	});
});

diatas kita memiliki element img

<img src="agung sucipto.jpg" id="cropbox"/>

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

<?php
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);
}

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'<img src="'.$dir.$new_name.".$info[extension]".'"/>';
}
?>

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. $width yaitu ukuran lebar output gambar yang diinginkan
  2. $height yaitu ukuran tinggioutput gambar yang diinginkan
  3. $quality yaitu input dengan 0-100 untuk menentukan kualitas output gambar
  4. $dir merupakan folder penyimpanan hasil croping
  5. $post itu name dari gambar asli yang akan di crop (source)
  6. $new_name nama baru gambar hasil crop
  7. $x koordinat x dari form
  8. $y koordinat y dari form
  9. $w lebar gambar dari form
  10. $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'<img src="'.$dir.$new_name.".$info[extension]".'"/>';
}

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 ....

 

 


About Author

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


Comment & Discussions

  • pak saya mempuyai kendala,
    mungkin dikarenakan jcrop.js dan jcrop.css.
    saat foto udah muncul, knp area untuk cropnya tidak muncul,
    mohon bantuanyaa.....

    • Agung Sucipto

      Mohon maaf atas keterlambatan respon. mungkin bisa disebabkan oleh jquer.js nya, coba lihat scriptnya. siapa tau bisa di cek in


  • Tri Cahyo Gusmantoro
    kalau misalkan gambarnya di preview dari input file bisa gak ya?

  • Tri Cahyo Gusmantoro
    saya juga ada masalah lain pak, kalau format gambarnya png, gambarnya gak bisa kebaca waktu dicrop

  • hilda ariyanti
    Siang mas maaf mau tanya, klo misal crop Foto Produk Barang, biar rapi tanpa memakai background sama sekali,,, pakai aplikasi apa ya supaya rapi,, karena saya udh coba smua aplikasi tidak bisa rapi..
    apa memang perlu keahlian khusus atau memang mas tau ada aplikasi yang bisa crop foto dengan rapi

    Terima Kasih

  • Agung Sucipto
    Akan saya bikin tutorial berikutnya, crop tanpa backround khusus PNG files

  • Please LOGIN before if you want to give the comment.