How to crop an image using php with jquery as in facebook profile picture upload

When we consider about cropping an image is a very useful and important factor to save the database space and your bandwidth. Once you're loading the relevant web page, it'll minimize the page execution time and load the web page faster. Image cropping technique has been using for many occasions such as Facebook and Gmail profile picture selection. After uploading the picture, then you can select the area where you're willing to use as your profile picture. In order to do that, crop a particular area of a picture under a predefined dimension. It is really easy and simple to crop the area and save as your profile picture.

 

These techniques are mostly used in social network sites. Throughout this article, we will guide you to script such a web page which makes is functionality as cropping an image then store in a folder for future purposes.

There are only two steps to follow to create the PHP web page. Once you're digging through the tutorial, you may stick a place that you couldn't understand. You can put a comment below which will regard your question, then we reply with the best answer to resolve your problem.

1. Create a CSS file to define the parameters for cropping.
2. Create two PHP files to set the upload folder location where the original image and cropped image have to be saved for future purposes and script the code to select the desired portion of the image.

Step 1 - Create a CSS file to define the parameters for cropping.

You have to create a CSS folder. It will easy for you to select the CSS files in the CSS directory. Create a CSS file and name it as 'imgareaselectcrop.css'.

 

Step 2 - Create two PHP files to set the upload folder location where the original image and cropped image have to be saved for future purposes and script the code to select the desired portion of the image.

You have to create two PHP files to add scripts to crop the desired area of the uploaded image. However, only scripting PHP codes and make the CSS won't enough to implement the web page. Here, you need to have two jQuery UI Plugin files to make easier to create image cropping web page. By using these jQuery files. the user who uploads the image into the web page able to select the desired portion of an image for cropping. (If you need these two files, you can comment below or download it from the internet).

Once you upload the image, the image will save in the uploads folder. Then you can crop the image. After cropping the image the cropped image will also save in the same location as 'small'.jpg. We have created a function to set the parameters which make the area to crop. The selected portion will be a square. After selecting the area, thanks to that jQuery files you able to drag the square and select any area. Now let's see what are the syntax.

When you are selecting the image area to crop, we define image size of 220PX for both height and width. Within this dimension, you have to select the portion to crop and save the image. Follow these easy and simple step to create image cropping web page. You can customize these PHP and CSS code further as per your requirement. 

If you have any doubts regards to this tutorial, please don't hesitate to raise it and feel free to give comments on this tutorial. Your comments are highly valuable for us to write future articles.