How to Resize and Crop Image using PHP and jQuery.

admin | Posted on May 10, 2021 |

Crop feature helps to resize the image as per the required size. You can also reduce the web page size and load time by showing the exact size image. just copy and paste code so easily use.

HTML, CSS and jQuery Code

<!DOCTYPE html>
<html>
<head>
    
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
    <style>
        body
        {
                margin:0px;
                padding:0px;
        }
        #crop_wrapper
        {
                position:relative;
                margin-left:150px;
                margin-top:50px;
                width:600px;
                height:400px;
        }
        #crop_wrapper img
        {
                width:600px;
                height:400px;
        }
        #crop_div
        {
                width:300px;
                height:200px;
                border:1px dashed white;
                position:absolute;
                top:0px;
                box-sizing:border-box;
        }
    </style>
      
   <script type="text/javascript">
        $(function() {
          $( "#crop_div" ).draggable({ containment: "parent" });
        });

        function crop()
        {
          var posi = document.getElementById('crop_div');
          document.getElementById("top").value=posi.offsetTop;
          document.getElementById("left").value=posi.offsetLeft;
          document.getElementById("right").value=posi.offsetWidth;
          document.getElementById("bottom").value=posi.offsetHeight;
          return true;
        }
    </script>
</head>

<body>
    <div id="crop_wrapper">
        <img src="images/crop_image.jpg">
        <div id="crop_div"></div>
   </div>

    <form method="post" action="" onsubmit="return crop();">
        <input type="hidden" value="" id="top" name="top">
        <input type="hidden" value="" id="left" name="left">
        <input type="hidden" value="" id="right" name="right">
        <input type="hidden" value="" id="bottom" name="bottom">
        <input type="submit" name="crop_image">
    </form>
</body>
</html>

PHP Code

<?php
if(isset($_POST['crop_image']))
{
  $y1=$_POST['top'];
  $x1=$_POST['left'];
  $w=$_POST['right'];
  $h=$_POST['bottom'];
  $image="images/nintendo.jpg";

  list( $width,$height ) = getimagesize( $image );
  $newwidth = 600;
  $newheight = 400;

  $thumb = imagecreatetruecolor( $newwidth, $newheight );
  $source = imagecreatefromjpeg($image);

  imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
  imagejpeg($thumb,$image,100); 


  $im = imagecreatefromjpeg($image);
  $dest = imagecreatetruecolor($w,$h);
	
  imagecopyresampled($dest,$im,0,0,$x1,$y1,$w,$h,$w,$h);
  imagejpeg($dest,"images/crop_image.jpg", 100);
}
?>

Leave a Reply Cancel reply