Crop Images using PHP GD Library and Jquery Resize

INNOVATIVEPHP

FOUNDATION TO INNOVATIVE WEB APPLICATION DEVELOPMENT

Crop Images using PHP GD Library and Jquery Resize in Jquery, PHP Image Manipulation by nimeshrmr

Crop Images using PHP GD Library and Jquery Resize Cropping images is a widely used feature in modern web applications. You can upload resize and crop images according to your preferences and display in the web site. All these features are used in facebook site fo managing images. In this tutorial I’m going to explain how to crop an image dynamically using PHP GD library and jquery events. This tutorial is divided into 2 main sections as shown below. Section 1 – Selecting the Cropping Area with Jquery Drag and Resize Events Section 2 – Cropping the Selected Image with PHP GD Library

Demo and Download Before you are going to read this long tutorial you might want to look at what we are going to develop using live example. so i have provided the demo and code download in the following links. Load the demo and drag the little div with a border anywhere u want and resize it using the arrow mark on the bottom. Once you have finished selecting the image part click the crop button.

Download Image Cropping Examples Image Cropping Examples Demo

Selecting the Cropping Area with Jquery Drag and Resize Events Before we create the user interface for selecting the cropping area of the image, i would like to give an introduction to jquery events used in this section. For this example we need to use jquery draggable event on a div and resize event on a div. Lets start by using simple examples. How to Make an Element Draggable with Jquery

1

$( "#resizable" ).draggable({ containment: "parent" });

Element can be made draggable by using the jquery draggable function. In the above example the element with id resizable is made draggable. You can use id,class or an element in the draggable method.

1

$( ".resizable" ).draggable({ containment: "parent" });

In the above code all the elements that has the class resizable are made draggable.

In the above code all the elements that has the class resizable are made draggable.

1

$( "p" ).draggable({ containment: "parent" });

In the above code all the paragraph elements are made draggable. I have used { containment: “parent” } parameter in all the drag examples given above. That ‘s means all the elements will be dragged inside it’s parent element. If its not specified the element can be dragged anywhere in the browser window. How to Make an Element Resizable with Jquery

1

$( "#resizable" ).resizable({ containment: "parent" });

Resizable function can be used to make elements resize. This function works as the same way as draggable function and id,class or element can be used. Since we have the knowledge of the functionalities which needs to build the user interface lets move on to the html and javascript code for selecting image to crop. Creating the Interface for Image Cropping

01

< form id = 'frm' action = 'imagecrops.php' method = 'post' > < div id = 'parent_container' style = '' >

02 03



04

< img src = "test.jpg" id = 'crop_img' />

05 06



07

< div id = "resizable" >

08 09



10 11 12

< input type = 'hidden' name = 'img_width' id = 'img_width'

/>

< input type = 'hidden' name = 'img_height' id = 'img_height'

/>

13

< input type = 'hidden' name = 'source_x' id = 'source_x' />

14

< input type = 'hidden' name = 'source_y' id = 'source_y' />

15 < input type = "submit" value = 'Crop' />

16 17 18



In the above code form is used to submit image cropping details to the php file. Next line contains the image used fro cropping.You can dynamically load a image to this page. Then i have defined a div called resizeble. This div can be dragged and resized inside the image to define the cropping area. Image part inside this div will be cropped on form submission. Next 4 hidden fields is used to pass the new image width,height and the x,y coordinates of the image to be cropped.

Jquery Code for Crop Interface

01

$(document).ready( function () {

02

$( "#resizable" ).resizable({ containment: 'parent' });

03

$( "#resizable" ).draggable({ containment: "parent" });

04 05

var img_width = $( '#crop_img' ).width();

06

var img_height = $( '#crop_img' ).height();

07

$( "#parent_container" ).width(img_width);

08

$( "#parent_container" ).height(img_height);

09 10

});

11

$(document).ready( function () { $( '#frm' ).submit( function () {

12 13

var position = $( '#resizable' ).position();

14

var position_img = $( '#crop_img' ).position();

15 16

$( '#img_width' ).val($( '#resizable' ).width());

17

$( '#img_height' ).val($( '#resizable' ).height());

18

$( '#source_x' ).val(position.left-8);

19

$( '#source_y' ).val(position.top - 8); });

20 });

21

First 2 lines of code makes the div with the id=resizable, draggable and resizable inside it’s parent container (parent_container div). Then the image with and height is calculated and width,height of the parent container is adjusted according to that. Next section contains the onsubmit method for the form. On submission width,height of the new image and x,y coordinates of the starting position is calculated and assigned to hidden variables. Then you can submit the form and image will be cropped using php as shown in the next section

Cropping the Selected Image with PHP GD Library Like we did in the previous section lets have an introduction to the PHP Gd Library and gd functions used in this example before moving onto cropping the image. PHP GD Library is used to process image handling functions in php. It provides extensive functionality to create,edit images. php imagecopy is the main function we are going to use in this example. This function allows you to copy one image inside a another image. In this example we are going to copy part of the image and paste into a new image with the cropped width and height using imagecopy function. Using imagecopy Function

1

imagecopy( $dest , $src , 0, 0, $source_x , $source_y , $image_width , $image_height );

$dest is the destination image. Since we are trying to crop an image destination image size should be equal to the cropped size. $src is the original image we want to crop. It should be in it’s original size.

Next 2 parameters are the coordinates to start on the destination image. Since we are cropping the part of image completely to the destination it should be 0,0. Next 2 parameters are the starting coordinates of the cropped image part. Last 2 parameters contain the height and width of the cropped image.

Crop the Image using GD Library Functions

01

// Get the width and height of image to crop

02

$image_width

03

$image_height = $_POST [ 'img_height' ];

= $_POST [ 'img_width' ];

04 05

// Starting cordinates of the original image

06

$source_x = $_POST [ 'source_x' ];

07

$source_y = $_POST [ 'source_y' ];

08 09

// Create jpeg image from the src image

10

$src = imagecreatefromjpeg( 'test.jpg' );

11 12

// Create a new image to paste the cropped image part

13

$dest = imagecreatetruecolor( $image_width , $image_height );

14 15

// Copy the image to destination

16

imagecopy( $dest , $src , 0, 0, $source_x , $source_y , $image_width , $image_height );

17 18

// Output and free from memory

19

header( 'Content-Type: image/jpeg' );

20

imagejpeg( $dest );

21 22

imagedestroy( $dest );

23

imagedestroy( $src );

First 2 lines of the above code will get the dimensions of the div used in the selection of the cropping area. Next 2 lines will get the starting coordinates of the original image by using the top left position of the moving div. Since we are using jpg in this example we can use imagecreatefromjpeg method to load the original image as source image. Then we create a new destination image using imagecreatetruecolor function. Next we copy the selected part to destination image as the cropped image using imagecopy function. Then we can output the image to the browser and destroy both images.

Whats Next ? In this example we used jpg images for cropping. You can use other gd library functions to crop other types of images as shown in below examples. Using a png Image for Cropping

1

imagecreatefrompng( 'test.png' );

2 3

header( 'Content-Type: image/png' ); imagepng( $dest );

4

Using a gif Image for Cropping

1

imagecreatefromgif( 'test.gif' );

2 3

header( 'Content-Type: image/gif' ); imagegif( $dest );

4

In this php image manipulation tutorial i have only explained the basic functionalities needed to crop an image. You can extend this functions to build a fully featured dynamic image cropper application using jquery and php. Feel free to give your ideas or questions about this tutorial on the comment section.

Added Notes Some of the users reported me that this example is not working properly in Google Chrome web browser. If you have any difficulties with regarding this please use the following code in the top of the script.

01

$(document).ready( function () {

02

$( 'img' ).load( function () {

03

$( "#resizable" ).resizable({ containment: "parent" });

04

$( "#resizable" ).draggable({ containment: "parent"

});

05 06

var img_width = $( '#crop_img' ).width();

07

var img_height = $( '#crop_img' ).height();

08

$( "#parent_container" ).width(img_width);

09

$( "#parent_container" ).height(img_height);

10 });

11 12

});

InnovativePHP.com runs on Dreamhost Dreamhost is a reliable web hosting server that enables you to host your dream web site. I have been using dreamhost for 1 year and experienced the most reliable customer support and most enhancing web features. Unlimited Bandwidth Unlimited Space Unlimited Email Accounts and much more

Check out the complete Feature List and Sign Up for the 2 week Free Trial

SIGN UP FOR UPDATES As a Web Developer or Blogger you might not get enough time to visit your favorite web sites frequently. So make sure to use one of the following 2 options to subscribe to InnovativePHP and avoid the risk of missing important stuff.

Subscribe To RSS

Subscribe To Email

Popular Posts

Recent Posts

Creating Word Cloud Widget Using Google Visualization API Jquery Featured Page Content Slider Plugin Tutorial For Beginners Crop Images using PHP GD Library and Jquery Resize Discover the Meaning of Asynchronous Request using Jquery Ajax Set and Get Codeigniter Session Variables in Controllers and Custom Classes Jquery Checkbox Examples

Download article as PDF

InnovativePhp Blog is proudly powered by WordPress and BuddyPress