Introduction

The most common requirement over the modern web applications is upload image, crop as required or resize it, whether for profile picture use or any other use in photo galleries (small and bigger image) or as thumbnails. This post is going to be very interesting for the beginners who haven’t played with images for web applications and others can use this as a reference for the awesome web applications. We will cover all the basic requirement and we have also provided the source code for direct view of the output which you can use in every day situations. A small definition of cropping from Wikipedia:

Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio.

The Concept

Before we begin, I will briefly discuss the concept behind cropping an Image.

We will use a combination of Jquery and PHP to achieve our goal. More specifically we will utilize the imgAreaSelect jQuery plugin. We will also utilize Image functions specific to PHP.

Here is what we will be doing

1.  Allow a user to make a selection by dragging over the Image. We also have a Preview Panel which lets user view the selection in real -time
2. Hold the Coordinates of the selection in hidden Form Fields. We will utilize the onSelectEnd callback function. The onSelectEnd callback is fired as soon as a user finishes making the selection.
3. Post selection coordinates to the crop.php file. The crop.php file will be responsible for final cropping of the image. We will utilize imagecreatetruecolor, imagecreatefromjpeg , imagecopyresampled and imagejpeg functions to actually crop the image. 
4. Finally we will display the cropped image.

Note: We assume that you have basic PHP programming knowledge, and your server is up and running. We are also assuming that you have knowledge of how to upload image using PHP.Continue Reading