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>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?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:

cropimages

Ok sekian Tutorial kali ini moga bermanfaat jika mau source lengkap nya bisa download dibawah ini .
DOWNLOAD




Happy Coding & Programing

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

Hubungi Saya