Crop Images Sederhana dengan Jquery & PHP
Hai all Ketemu lagi bersama saya portgas tea, dah lama nih gak bikin tutorial karena sibuk kerjaan jadi kuli bangunan hehe , setelah kemaren update ASKA 1.0.4 yang alhamdulilah kelar juga walaupun masih banyak kekurangan, kali ini saya bikin tutorial tentang Crop Images dengan Jquery & PHP moga akan bermanfaat.
Ok langsung saja sebelumnya kita download dulu file jquery & css nya bisa anda search di google jquery.Jcrop.min.js & jquery.Jcrop.css, kita buat directory baru di htdocs & simpan file jquery.Jcrop.min.js & jquery.Jcrop.css yang sudah kita download.
Lalu kita buat file index.php baru, dan kita masukan jquery.Jcrop.css seperti dibawah ini didalam <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crop Images With Jquery & PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/css/jquery.Jcrop.css" rel="stylesheet" media="screen">
<style type="text/css"> // untuk pengaturan warna & ukuran kotak yang kita blok
#target {
background-color: #ccc;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</head>Sekarang di dalam <body> kita buat seperti ini :
<div class="container">
<img src="demo_files/15845sg.jpg" id="cropbox" />
<form action="index.php" method="post" onsubmit="return checkCoords();">
<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="submit" value="Crop Image" class="btn btn-large btn-success" />
</form>
</div>Masih didalam <body> kita buat seperti dibawah ini :
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>Nah setelah itu kita buat fungsi PHP seperti dibawah ini yang berfungsi untuk memotong gambar sesuai ukuran yang kita inginkan.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 200;
$jpeg_quality = 100;
$src = 'demo_files/15845sg.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}?>Nah selesai deh mudah bukan ???? Script lengkap nya bisa lihat dibawah ini
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$targ_w = $targ_h = 200; //ukuran gambar
$jpeg_quality = 100;
$src = 'demo_files/15845sg.jpg'; //link gambar
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
}?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crop Images With Jquery & PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/css/jquery.Jcrop.css" rel="stylesheet" media="screen">
<style type="text/css">
#target {
background-color: #ccc;
width: 500px;
height: 330px;
font-size: 24px;
display: block;
}
</style>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://andeznet.com">AndezNet</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">Gambar</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<img src="demo_files/15845sg.jpg" id="cropbox" />
<form action="index.php" method="post" onsubmit="return checkCoords();">
<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="submit" value="Crop Image" class="btn btn-large btn-success" />
</form>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="alert alert-info">
<a name="contact"></a>
<h2>www.andeznet.com</h2>
<p class="text-info">Gudang Teknologi & Informasi</p>
<p>© <a href="http://andeznet.com">www.andeznet.com</a> <?php echo date("Y");?></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
</body>
</html>Jika sudah benar maka akan muncul seperti dibawah ini:
Ok sekian Tutorial kali ini moga bermanfaat jika mau source lengkap nya bisa download dibawah ini .
DOWNLOAD
Happy Coding & Programing
