Crop image

                  Crop image using jQuery and php

You might seen this features on social medias . when we are upload photos on social media we seen option crop image after upload image for fit on screen.  

index. html

<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
 <div style="float:left; width:60%">
   <img src="img.jpg" id="cropbox" class="img" />
   <br/>
    <input type='button' id="crop" value='CROP IMAGE' id="detect" style="height:60px;cursor: pointer; color:green; font-weight:bold;" ></button>
   </div>
  <div style="float:right; width:40%">
    <img src="#" id="croped" style="display:none;">
  </div>
</div>

Add jquery :

<script type="text/javascript">
  $(function(){
    var cod;
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: function(c){
       cod = {x:c.x,y:c.y,w:c.w,h:c.h};     
      }
    });
 
    $("#crop").click(function(){
      if(typeof(cod) == 'undefined') {
        alert("Please select crop area on image.");
        return false;
      }
      var img = $("#cropbox").attr('src');
        $("#croped").show();
        $("#croped").attr('src','img.php?x='+cod.x+'&y='+cod.y+'&w='+cod.w+'&h='+cod.h+'&img='+img);
    });
  });
</script>

image.php

<?php
  $imgPath = $_GET['img'];
  $targ_w = $targ_h = 150;
  $jpeg_quality = 90;
 
  $img_r = imagecreatefromjpeg($imgPath);
  $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
  imagecopyresampled($dst_r,$img_r,0,0,$_GET['x'],$_GET['y'],
  $targ_w,$targ_h,$_GET['w'],$_GET['h']);
 
  header('Content-type: image/jpeg');
  imagejpeg($dst_r,null,$jpeg_quality);
 
exit;
 
?>


Output: 




Fruxinfo pvt. ltd.