✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Resize And Crop Image Using PHP And jQuery

Last Updated : Jul 1, 2023

IN - PHP jQuery | Written & Updated By - Amruta

In this tutorial we will Resize and Crop an Image Using PHP and jQuery, resize and Crop Images is very useful and important technique to save space and bandwidth and it also decrease page execution time and load your webpage much faster.

Crop the image when you want to a particluar part of an image to display like only your face and sunset behind you etc. So both are very useful and important technique you can do with your images.

You may also like Compress And Resize Image Before Uploading To Database Using PHP

Resize And Crop Image Using PHP And jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Resize and Crop Image it takes only Three steps:-

  1. Make a HTML file and define markup and script for resize and crop
  2. Make a PHP file to resize and crop the image
  3. Make a CSS file and define styling for Resizing and Cropping

Step 1. Make a HTML file and define markup and script for resize and crop

We make a HTML file and save it with a name crop.html 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="crop_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery-ui.js"></script>
  <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/image1.jpg">
  <div id="crop_div">
  </div>
</div>

<form method="post" action="do_crop.php" 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>

First of all you need to download the jQuery Ui Plugin to make a div draggable so that user can drag the div and select the desired portion of an image for cropping.

In this step we made two div "crop_wrapper" which is the container of the image and draggable div and "crop_div" is the draggable div.

We made a function crop() which get the dimension of the image and then send all the data after submitting the form to do_crop.php file to do cropping.You may also like Add WaterMark To Image Using PHP

Step 2. Make a PHP file to resize and crop the image

We make a PHP file named do_crop.php 

<?php
if(isset($_POST['crop_image']))
{
  $y1=$_POST['top'];
  $x1=$_POST['left'];
  $w=$_POST['right'];
  $h=$_POST['bottom'];
  $image="images/image1.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);
}
?>

In this step we resize and crop the image using PHP GD library and we get all the dimension of crop_div.

We first load the image from folder you can also create an upload form to upload the image if dont know we have a tutorial on How To Upload Imageand then we resize the image to 600px by 400px because we define image size of 600px by 400px in our CSS file because if the image is bigger or smaller than your display image then you get different dimension from crop_div.

It is very important to resize the image with same size as of displaying the image whether you upload an image or just load from folder.

And then we use imagecopyresampled() function and after that we use imagejpeg() function to create the cropped image and save it with name crop_image.jpg.

Step 3. Make a CSS file and define styling for Resizing and Cropping

We make a CSS file and save it with name crop_style.css. 

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

Thats all, this is how to Resize and Crop Image Using PHP and jQuery. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on resize image using jquery and php and crop image using jquery and php helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →