There is an easier way to crop an image as you want it. You can crop an image with a fixed aspect ratio or a dynamic ratio also. The crop image size can also make as you wish. So, now let’s take look at the coding part.

First you have to load two files. One “jquery.Jcrop.js” that is a js file and another is css file that’s “jquery.Jcrop.css”. The js file helps you to crop the image and css file for just good looks for your cropping area. That can run also without the css file loaded.

First you have known that we make this in two parts. One is view section, and another is where the image is actually cropping. We named that section as controller page.

————————————————————————————————————-

Now, in view page you have simple things to do. Just show the original image like…

 <img src="bird.jpg" id="cropbox" height="550"/>  
 <br>  
 <form action="controller.php" method="post" onsubmit="return checkCoords();">  
 <input type="hidden" id="x" name="x" />  
 <input type="hidden" id="y" name="y" />  
 <input type="hidden" id="w" name="w" />  
 <input type="hidden" id="h" name="h" />  
 <input type="submit" value="Crop Image" class="cropBlueBtn" />  
 </form>  

————————————————————————————————————-

By this image id write a JavaScript that …

$(function(){  
 $('#cropbox').Jcrop({  
 aspectRatio: 0,  
 onSelect: updateCoords  
 });  
 });

In this function the “aspectRatio” is the area of the cropping image. When the ratio is 1 that makes a square area. Such as for a 4:3 crop area make the ratio to 1.333(4/3). And set it zero it can make a dynamic ratio.

————————————————————————————————————-

function updateCoords(c)  
 {  
 $('#x').val(c.x);  
 $('#y').val(c.y);  
 $('#w').val(c.w);  
 $('#h').val(c.h);  
 }; 

That function updateCoords() for the selected areas value of coordinates. First two (x,y) is the starting position(Top-Left corner of the area) of the cropping area. And last two are width (w) and Height (h) of the area. These values are important when we crop the image.

————————————————————————————————————-

 function checkCoords()  
 {  
 if (parseInt($('#w').val())){return true;}  
 alert('Please select a crop region then press crop image button.');  
 return false;  
 };

This is not so important. If you not selected any area it alerts an error message.

————————————————————————————————————-

There is the end of the view page work. You may send the image path also with the coordinates of the cropping position.
Now in our second part you just get the four values (x,y,w,h). Then write the php code in a controller.php page.

 <?php  
 $targ_w = $_POST['w'];  
 $targ_h = $_POST['h'];  
 $jpeg_quality = 90;  
 $src = 'bird.jpg';  
 $data = getimagesize($src);  
 $actualWidth = $data[0];  
 $actualHeight = $data[1];  
 $ratio = $actualHeight/550;  
 $_POST['x'] = $_POST['x']*$ratio;  
 $_POST['y'] = $_POST['y']*$ratio;  
 $_POST['w'] = $_POST['w']*$ratio;  
 $_POST['h'] = $_POST['h']*$ratio;

If in view page you can’t display the image in original size then the values from the view page are not the actual you want. In that case the cropping is not correct. To resolve that problem you have to get the original image size by using the function “getimagesize”. And then set the all the values with that ratio. It makes a perfect cropping area which we want.

————————————————————————————————————-

 $img_r = imagecreatefromjpeg($src);  
 $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );  
 imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);  
 imagejpeg($dst_r,$src);  
 imagedestroy ($src);  
 header("Location:index.php");  
 ?>  

And then finally above code crop the original image and replaced with the previous image. You can keep the original image by changing the url of the function imagejpeg($dst_r,$src); . Where $src is the new image url.

Thank you, and enjoy coding.