JCrop Extension Implementation In PHP

I came across a really nice looking plugin for JQuery the other day that allowed you to select part of an image. This plugin is called JCrop.

This plugin supports things like thumbnail generation, animation, styling and event handling. The only problem is that this is all done on the client side, there is one example of a PHP script that resizes images using PHP, but this only works with JPEG images. The site says that improvements to the code are left as an exercise to the reader, so I though I would take a shot at it.

Rather than start from scratch with the PHP implementation I have adapted the ImageResize class that I talked about some months ago. I have changed the name to ImageManipulation as it has gone beyond a simple image resizing class.

I won't post the entire source code of that class here as it will take up too much space, instead I will provide a link to it.

I'm going to be using the same JavaScript code from the Jcrop website example, but for convenience I will reproduce it here with some small changes. Basically I have removed all unnecessary HTML, included a DOCTYPE declaration, cleaned up the script tags and used the JQuery library from the Google AJAX Libraries site.

//<!--





$(function(){


$('#cropbox').Jcrop({


aspectRatio: 1,


onSelect: updateCoords


});


});





function updateCoords(c)


{


$('#x').val(c.x);


$('#y').val(c.y);


$('#w').val(c.w);


$('#h').val(c.h);


};





function checkCoords()


{


if (parseInt($('#w').val())) return true;


alert('Please select a crop region then press submit.');


return false;


};


// -->


Jcrop - Crop Behavior

This also includes the JCrop file (jquery.Jcrop.pack.js) and a CSS file (called jquery.Jcrop.css) that will make the selection box on the image look nice.

The function updateCoords() is used by JCrop to enter the coordinates of our crop into a set of hidden input boxes. This allows us to use a POST request to send the coordinates to our server. This is a callback function set in the JCrop initialization.

The aspectRatio setting forces the cropping box created to be square.

The checkCoords() function simply checks to see if a crop window has been created. If not then an alert is raised and the browser does nothing.

Next we need to implement our PHP code that will capture the image parameters and crop our image to a given size. This is done by creating an instance of the ImageManipulation class (giving the filename as the source), running the setCrop() method, with the correct parameters and using the show() method to display the output to screen.

<?php if ($_SERVER['REQUEST_METHOD'] == 'POST')


{


$src = 'flowers.jpg';





require('ImageManipulation.php');





$objImage = new ImageManipulation($src);


if ( $objImage-?>imageok ) {


$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);


$objImage->resize(500);


$objImage->show();


//$objImage->save('12345.png');


} else {


echo 'Error!';


}


exit;


}


?>

This will display the output to screen only, if you want to save the output to a file then remove the comment on the line that runs the save() method.

I have put an example of this JCrop implementation in action in the same place as the ImageManipulation class. I have also created a source file so that you can download the full thing easily.

This method of cropping will work with any file type.