Tutorial Cara Mudah Crop Gambar menggunakan Php dan jquery
Bismillah
Jika
kalian sedang mencari tutorial cara crop gambar menggunakan php dan jquery kalian berada pada web yang tepat karena Kali
ini saya akan bahas cara memotong atau mengcrop gambar menggunakan php dan jquery teknik ini banyak di gunakan oleh oleh web
besar salah satu yang pernah menerapkan tekhnik crop ini yaitu facebook.
Ga usah panjang lebar lagi kita mulai saja… tentunya
kita persiapkan dahulu apa saja yang di butuhkan untuk membuat tekhnik crop ini
Pertama yang kalian perlukan adalah jquery, jquery apa saja yang kalian butuhkan yaitu
- jquery.1.4.2.min.js
- jquery.imgareaselect.pack.js
Setelah kita persiakan jquery kita buat dulu file index.php
<?php
// Folder tempat penyimpanan gambar
$path = "upload/";
?>
<html>
<head>
<title>Crop Gambar dengan
jQuery</title>
</head>
<!--menyertakan style css plugin -->
<link rel="stylesheet"
type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript"
src="js/jquery.1.4.2.min.js"></script>
<!--menyertakan plugin
imageAreSelect-->
<script type="text/javascript"
src="js/jquery.imgareaselect.pack.js"></script>
<script
type="text/javascript">
<!--Fungsi untuk membagi objek gambar sama
besar-->
function ukuran(im,obj) {
var
x_axis = obj.x1;
var
x2_axis = obj.x2;
var
y_axis = obj.y1;
var
y2_axis = obj.y2;
var
thumb_width = obj.width;
var
thumb_height = obj.height;
if(thumb_width
> 0) {
if(confirm("Apakah
mau menyimpan gambar thumbnail?")) {
$.ajax({
type:"GET",
//proses
ajax request pada file "gambar_ajax.php"
url:"gambar_ajax.php?t=ajax&img="+$("#nama_gbr").val()+"&w="+thumb_width+"&h="+thumb_height+"&x1="+x_axis+"&y1="+y_axis,
cache:false,
success:function(response)
{
$("#cropimage").hide();
$("#thumbs").html("");
$("#thumbs").html("<img
src='upload/"+response+"' />");
}
});
}
}
else
alert("Pilih dulu area
seleksi..!");
}
// pemanggilan dan pengaktifan plugin jquery
imgareaselect
$(document).ready(function () {
$('img#foto').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: ukuran
});
});
</script>
<?php
$valid_format
= array("jpg", "png", "gif", "bmp");
if(isset($_POST['submit']))
{
$name
= $_FILES['gbr']['name'];
$size
= $_FILES['gbr']['size'];
if(strlen($name))
{
list($txt,
$ext) = explode(".", $name);
if(in_array($ext,$valid_format)
&& $size<(1024*1024)) {
//
Penamaan file gambar dengan penggabungan fungsi waktu dan pengambilan 5
karakter nama file gambar asli
$nama_gambar
= time().substr($txt, 5).".".$ext;
$tmp
= $_FILES['gbr']['tmp_name'];
if(move_uploaded_file($tmp,
$path.$nama_gambar)) {
$gambar="<h4>Silahkan
Select & Drag pada Area Gambar</h4>
<img
src='upload/".$nama_gambar."' id=\"foto\"
style='max-width:500px' >";
}
else
echo
"Gagal";
}
else
echo
"Kesalahan format file..!";
}
else
echo
"Browse/pilih gambar dulu..!";
}
?>
<body>
<div style="margin:0 auto;
width:600px">
<?php echo @$gambar; ?>
<div id="thumbs"
style="padding:5px; width:600px"></div>
<div style="width:600px">
<form id="cropimage"
method="post" enctype="multipart/form-data">
Upload
Gambar : <input type="file" name="gbr"
id="gbr" />
<input
type="hidden" name="nama_gbr" id="nama_gbr"
value="<?php echo($nama_gambar)?>" />
<input
type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>
Sekarang kalian buat file dengan nama
gambar_ajax.php copy kan code di bawah code di bawah berfungsi untuk memotong
dan menyimpan hasil crop
<?php
$t_width = 50; // Maximum lebar thumbnail
$t_height = 50; // Maximum panjang thumbnail
$nama_baru =
"kecil".".jpg"; // nama gambar thumbnail
$path = "upload/"; // folder tempat
penyimpanan gambar
if(isset($_GET['t']) and $_GET['t'] ==
"ajax") {
extract($_GET);
$ratio
= ($t_width/$w);
$nw
= ceil($w * $ratio);
$nh
= ceil($h * $ratio);
$nimg
= imagecreatetruecolor($nw,$nh);
$im_src
= imagecreatefromjpeg($path.$img);
imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
imagejpeg($nimg,$path.$nama_baru,90);
echo
$nama_baru."?".time();
exit;
}
?>
untuk tampilannya bisa kalian lihat di bawah
Tampilan ketika mengcrop gambar
untuk lebih jelasnya kalian bisa lihat video di
bawah ini dan untuk file lengkapnya silahkan download di sini
sekian postingan kali ini semoga bermanfaat jika ada
yang di tanyakan silahkan isi kolom komentar
