September 1, 2015 picture2

Resizing and Cropping an image using PHP

The art of re-sizing and cropping images has been around for some time. It is used in many places where you can upload images to. This technique of re-sizing is very useful and has shown to be important when it comes to saving hosting space and bandwidth. Not only that, it also decrease page execution time and loads your webpage much faster. Cropping an image allows you to display only a specified part of an image for example, this can be your face, a certain sign you want emphasize on, etc. Both are very useful and important techniques you can do with your images. Following up, we will re-size and crop an image using PHP and jQuery.


To Resize and Crop Image it takes only Three steps:-
Make a HTML file and define markup and script for resize and crop
Make a PHP file to resize and crop the image
Make a CSS file and define styling for Resizing and Cropping

Step 1

Make an HTML file and define markup and script for re-size and crop
We make an HTML file and save it with a name crop.html just to maintain simplicity.

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 gets the dimensions of the image and then send all the data after submitting the form to do_crop.php file to do cropping.

Step 2

Make a PHP file to resize and crop the image
We make a PHP file named do_crop.php

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 the folder you can also create an upload form to upload the image. If you don’t know how to upload an image, 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. Afterwards, we use imagecopyresampled() function and 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.

Here you have it folks, how to Resize and Crop Image Using PHP and jQuery. You should be able to customize this code to fit your needs. Let me know if this works for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

The qTranslate Editor has disabled itself because it hasn't been tested with your Wordpress version yet. This is done to prevent Wordpress from malfunctioning. You can reenable it by clicking here (may cause data loss! Use at own risk!). To remove this message permanently, please update qTranslate to the corresponding version.