Crop image using jquery and php

by

In this session i am going to show you how to crop any image using jquery jcrop library and PHP GD library. You might have seen this feature on popular social networking website, When ever you upload your profile picture application asked to crop image to fit on screen.

There is a plugin called jcrop in jquery i am going to use to select image co-ordinates and image height width x and y co-ordinates and send it to server, On server side i used php gd library to crop image as per given co-ordinates.
cropimg
Let’s start..

Here i am not going to show you how to upload images, I’ll show you the next step directly after uploading image, How to crop it. You can see these tutorial to uploading images.
1). How to upload images with progress bar using jquery and php.
2). How to upload multiple images with progress bar using jquery and php.
3). How to upload images with progress bar using jquery and nodejs.




Create index.html file and call uploaded image.

index.html

After that add jcrop library Note: jcrop library dependent on jquery core library so don’t forget to add core library first.

Now add jquery snippet to make selection on image co-ordinates and send it to server.




Finally create your new croped image using PHP GD library.

img.php

See live demo and download full source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Published by Rohit