Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development In Your Email

Resize And Crop Image Using PHP And jQuery.

Monday, Jan 9, 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>
<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 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.

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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email