Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Resize And Crop Image Using PHP And jQuery.

Friday, Dec 15, 2017

Tags:- PHP 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.In this tutorial we will Resize and Crop an Image Using PHP and jQuery.You may also like Compress And Resize Image Before Uploading To Database Using PHP

See Demo
Crop Image Using PHP

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>
  <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');
      return true;



<div id="crop_wrapper">
  <img src="images/image1.jpg">
  <div id="crop_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">


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


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

  $im = imagecreatefromjpeg($image);
  $dest = imagecreatetruecolor($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 Image and 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.

#crop_wrapper img
	border:1px dashed white;

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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me

Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.