Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

How to Resize and Crop Image using PHP and jQuery.

by
Category:php
php html css
How to Resize and Crop Image using PHP and jQuery.

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. You may also like How to Display Text Over Image Using HTML And CSS and Multiple Image Upload in PHP.

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);
}
?>

0 Comments


Html code work in comment box


Related Post