JQuery Crop Image,upload,and Save

Ada dua cara menyimpan gambar kedatabase mysql, bisa menyimpan langsung file gambar dengan field database typeblob, namun kelemahan cara ini membuat database menjadi lemot, dan cara kedua adalh menyimpan file gambar kedalam direktori dan menyimpan nama gambar kedalam database, bisa menggunakan varchar, beberapa hari ini saya lagi mengotak atik file upload_crop_v1.2.php yang bisa sobat download di situsnya http://www.webmotionuk dot co dot uk . tutorial yang saya dapatkan di internet hanya yang standar alias tidak crop dahulu sebelum upload, kalau menggunakan keyword english banyak ya, tapi mudeng memahaminya :D

Pertama-tama kita buat dulu database dengan nama terserah sobat namun harus perhatikan koneksi nantinya, lalu buat tabel seperti gambar dibawah ini:

Selanjutnya download file upload_crop.php di sini  dan ini demonya

"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
$allowed_image_ext = array_unique($allowed_image_types); // do not change this
$image_ext = ""; // initialise variable, do not change this.
foreach ($allowed_image_ext as $mime_type => $ext) {
    $image_ext.= strtoupper($ext)." ";
}


##########################################################################################################
# IMAGE FUNCTIONS                       #
# You do not need to alter these functions                 #
##########################################################################################################
function resizeImage($image,$width,$height,$scale) {
 list($imagewidth, $imageheight, $imageType) = getimagesize($image);
 $imageType = image_type_to_mime_type($imageType);
 $newImageWidth = ceil($width * $scale);
 $newImageHeight = ceil($height * $scale);
 $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
 switch($imageType) {
  case "image/gif":
   $source=imagecreatefromgif($image); 
   break;
     case "image/pjpeg":
  case "image/jpeg":
  case "image/jpg":
   $source=imagecreatefromjpeg($image); 
   break;
     case "image/png":
  case "image/x-png":
   $source=imagecreatefrompng($image); 
   break;
   }
 imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);
 
 switch($imageType) {
  case "image/gif":
     imagegif($newImage,$image); 
   break;
       case "image/pjpeg":
  case "image/jpeg":
  case "image/jpg":
     imagejpeg($newImage,$image,90); 
   break;
  case "image/png":
  case "image/x-png":
   imagepng($newImage,$image);  
   break;
    }
 
 chmod($image, 0777);
 return $image;
}
//You do not need to alter these functions
function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
 list($imagewidth, $imageheight, $imageType) = getimagesize($image);
 $imageType = image_type_to_mime_type($imageType);
 
 $newImageWidth = ceil($width * $scale);
 $newImageHeight = ceil($height * $scale);
 $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
 switch($imageType) {
  case "image/gif":
   $source=imagecreatefromgif($image); 
   break;
     case "image/pjpeg":
  case "image/jpeg":
  case "image/jpg":
   $source=imagecreatefromjpeg($image); 
   break;
     case "image/png":
  case "image/x-png":
   $source=imagecreatefrompng($image); 
   break;
   }
 imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
 switch($imageType) {
  case "image/gif":
     imagegif($newImage,$thumb_image_name); 
   break;
       case "image/pjpeg":
  case "image/jpeg":
  case "image/jpg":
     imagejpeg($newImage,$thumb_image_name,90); 
   break;
  case "image/png":
  case "image/x-png":
   imagepng($newImage,$thumb_image_name);  
   break;
    }
 chmod($thumb_image_name, 0777);
 return $thumb_image_name;
}
//You do not need to alter these functions
function getHeight($image) {
 $size = getimagesize($image);
 $height = $size[1];
 return $height;
}
//You do not need to alter these functions
function getWidth($image) {
 $size = getimagesize($image);
 $width = $size[0];
 return $width;
}

//Image Locations
$large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
$thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];

//Create the upload directory with the right permissions if it doesn't exist
if(!is_dir($upload_dir)){
 mkdir($upload_dir, 0777);
 chmod($upload_dir, 0777);
}

//Check to see if any images with the same name already exist
if (file_exists($large_image_location)){
 if(file_exists($thumb_image_location)){
  $thumb_photo_exists = "<img alt="\" humbnail="" image="" src="\" thumb_image_name.="" upload_path.="" user_file_ext="" />";
 }else{
  $thumb_photo_exists = "";
 }
    $large_photo_exists = "<img alt="\" arge="" image="" large_image_name.="" src="\" upload_path.="" user_file_ext="" />";
} else {
    $large_photo_exists = "";
 $thumb_photo_exists = "";
}

if (isset($_POST["upload"])) { 
 //Get the file information
 $userfile_name = $_FILES['image']['name'];
 $userfile_tmp = $_FILES['image']['tmp_name'];
 $userfile_size = $_FILES['image']['size'];
 $userfile_type = $_FILES['image']['type'];
 $filename = basename($_FILES['image']['name']);
 $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));
 
 //Only process if the file is a JPG, PNG or GIF and below the allowed limit
 if((!empty($_FILES["image"])) &amp;&amp; ($_FILES['image']['error'] == 0)) {
  
  foreach ($allowed_image_types as $mime_type =&gt; $ext) {
   //loop through the specified image types and if they match the extension then break out
   //everything is ok so go and check file size
   if($file_ext==$ext &amp;&amp; $userfile_type==$mime_type){
    $error = "";
    break;
   }else{
    $error = "Only <strong>".$image_ext."</strong> images accepted for upload
";
   }
  }
  //check if the file size is above the allowed limit
  if ($userfile_size &gt; ($max_file*1048576)) {
   $error.= "Images must be under ".$max_file."MB in size";
  }
  
 }else{
  $error= "Select an image for upload";
 }
 //Everything is ok, so we can upload the image.
 if (strlen($error)==0){
  
  if (isset($_FILES['image']['name'])){
   //this file could now has an unknown file extension (we hope it's one of the ones set above!)
   $large_image_location = $large_image_location.".".$file_ext;
   $thumb_image_location = $thumb_image_location.".".$file_ext;
   
   //put the file ext in the session so we know what file to look for once its uploaded
   $_SESSION['user_file_ext']=".".$file_ext;
   
   move_uploaded_file($userfile_tmp, $large_image_location);
   chmod($large_image_location, 0777);
   
   $width = getWidth($large_image_location);
   $height = getHeight($large_image_location);
   //Scale the image if it is greater than the width set above
   if ($width &gt; $max_width){
    $scale = $max_width/$width;
    $uploaded = resizeImage($large_image_location,$width,$height,$scale);
   }else{
    $scale = 1;
    $uploaded = resizeImage($large_image_location,$width,$height,$scale);
   }
   //Delete the thumbnail file so the user can create a new one
   if (file_exists($thumb_image_location)) {
    unlink($thumb_image_location);
   }
  }
  //Refresh the page to show the new uploaded image
  header("location:".$_SERVER["PHP_SELF"]);
  exit();
 }
}

if (isset($_POST["upload_thumbnail"]) &amp;&amp; strlen($large_photo_exists)&gt;0) {
 //Get the new coordinates to crop the image.
 $x1 = $_POST["x1"];
 $y1 = $_POST["y1"];
 $x2 = $_POST["x2"];
 $y2 = $_POST["y2"];
 $w = $_POST["w"];
 $h = $_POST["h"];
 //Scale the image to the thumb_width set above
 $scale = $thumb_width/$w;
 $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
 //Reload the page again to view the thumbnail
 header("location:".$_SERVER["PHP_SELF"]);
 exit();
}


if ($_GET['a']=="delete" &amp;&amp; strlen($_GET['t'])&gt;0){
//get the file locations 
 $large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
 $thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
 if (file_exists($large_image_location)) {
  unlink($large_image_location);
 }
 if (file_exists($thumb_image_location)) {
  unlink($thumb_image_location);
 }
 header("location:".$_SERVER["PHP_SELF"]);
 exit(); 
}
?&gt;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
 <title>WebMotionUK - PHP & Jquery image upload & crop</title>
 <script src="js/jquery-pack.js" type="text/javascript"></script>
 <script src="js/jquery.imgareaselect.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 
* Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk
* Date: 2008-11-21
* "PHP & Jquery image upload & crop"
* Ver 1.2
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
* IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, 
* INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
* STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF 
* THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
-->
<ul>
<li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li>
<li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download Files</a></li>
</ul>
0){
 $current_large_image_width = getWidth($large_image_location);
 $current_large_image_height = getHeight($large_image_location);?&gt;
<script type="text/javascript">
function preview(img, selection) { 
 var scaleX = <?php echo $thumb_width;?> / selection.width; 
 var scaleY = <?php echo $thumb_height;?> / selection.height; 
 
 $('#thumbnail + div > img').css({ 
  width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
  height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
  marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
  marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
 });
 $('#x1').val(selection.x1);
 $('#y1').val(selection.y1);
 $('#x2').val(selection.x2);
 $('#y2').val(selection.y2);
 $('#w').val(selection.width);
 $('#h').val(selection.height);
} 

$(document).ready(function () { 
 $('#save_thumb').click(function() {
  var x1 = $('#x1').val();
  var y1 = $('#y1').val();
  var x2 = $('#x2').val();
  var y2 = $('#y2').val();
  var w = $('#w').val();
  var h = $('#h').val();
  if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
   alert("You must make a selection first");
   return false;
  }else{
   return true;
  }
 });
}); 

$(window).load(function () { 
 $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
});

</script>

<h1>
Photo Upload and Crop</h1>
0){
 echo "<ul>
<li><strong>Error!</strong></li>
<li>".$error."</li>
</ul>
";
}
if(strlen($large_photo_exists)&gt;0 &amp;&amp; strlen($thumb_photo_exists)&gt;0){
 echo $large_photo_exists."&nbsp;".$thumb_photo_exists;
 echo "<a a="delete&amp;t=" href="https://www.blogger.com/" random_key="" user_file_ext="">Delete images</a>

";
 echo "<a href="https://www.blogger.com/">Upload another</a>

";
 //Clear the time stamp session and user file extension
 $_SESSION['random_key']= "";
 $_SESSION['user_file_ext']= "";
}else{
  if(strlen($large_photo_exists)&gt;0){?&gt;
  <h2>
Create Thumbnail</h2>
<div align="center">
   <img alt="Create Thumbnail" id="thumbnail" src="&lt;?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?&gt;" style="float: left; margin-right: 10px;" />
   <div style="border: 1px #e5e5e5 solid; float: left; height: &lt;?php echo $thumb_height; overflow: hidden; position: relative; width: &lt;?php echo $thumb_width;">
    <img alt="Thumbnail Preview" src="&lt;?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?&gt;" style="position: relative;" />
   </div>
<form action="&lt;?php echo $_SERVER[" name="thumbnail" php_self="">
" method="post"&gt;
    <input id="x1" name="x1" type="hidden" value="" />
    <input id="y1" name="y1" type="hidden" value="" />
    <input id="x2" name="x2" type="hidden" value="" />
    <input id="y2" name="y2" type="hidden" value="" />
    <input id="w" name="w" type="hidden" value="" />
    <input id="h" name="h" type="hidden" value="" />
    <input id="save_thumb" name="upload_thumbnail" type="submit" value="Save Thumbnail" />
   </form>
</div>
<hr />
 
 <h2>
Upload Photo</h2>
<form action="&lt;?php echo $_SERVER[" enctype="multipart/form-data" name="photo" php_self="">
" method="post"&gt;
 Photo <input name="image" size="30" type="file" /> <input name="upload" type="submit" value="Upload" />
 </form>
<!-- Copyright (c) 2008 http://www.webmotionuk.com -->
</body>
</html>

Perhatikan baris 248, ganti dengan script berikut:

$host = "localhost";
 $user = "root";
 $pass = "";
 $dbName = "uploadimg";
 mysql_connect($host, $user, $pass);
 mysql_select_db($dbName)
 or die ("Connect Failed !! : ".mysql_error());
 $q = "INSERT into tb_image VALUES('','".$thumb_image_location."')"; 
 //insert image property to database
 $result = mysql_query($q);

Pasti sobat malas copas, takut nantinya tidak berhasil alias error, silahkan didownload dilink berikut lengkap dengan database .sqlnya, sekian tutorial JQuery Crop Image,upload,and Save , silahkan sobat kembangkan. Happy Blogging :D