Tutorial: How to Implement Jcrop into an Application

Published October 10, 2009 • 5 Comments • 12 Delicious Bookmarks

When creating the ‘image control panel’ for the latest version of GetSimple, I decided to integrate the wonderful Jcrop jQuery plugin into it. Amazingly, there are very few tutorials online that show the full extent of how to use Jcrop in real world situations. The only one I found that was of use was TalkInCode’s tutorial. I did start out using that example’s ImageManipulation class, but changed it slightly so that after submission, you are brought back to the original page instead of being shown the thumbnail.

Demo & Features

View the Demo or download the files.

Some of the more unique features of this demo are:

• The aspectRatio changes to 1:1 when ctrl-Q or command-Q is pressed
• The dimensions of the selected area are shown in an interesting way
• Stats on the thumbnail and the current image are displayed

The Basic HTML

The demo/download has some extra code for displaying the image stats & linking of the css, js and class files.

<!-- image for Jcrop -->
<img src="<?php echo $src_folder . $src; ?>" id="cropbox" />

<!-- selection dimentions -->
<div id="handw" class="toggle" >Selection Dimentions<br /><span id="picw"></span> x <span id="pich"></span></div>

<!-- form that Jcrop fills in -->
<form id="jcropform" action="image.php?i=<?php echo $src; ?>" method="post" onsubmit="return checkCoords();">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" class="submit" value="Create Thumbnail" />
    <span class="small" ><em>ctrl-Q</em> or <em>command-Q</em> for square</span>
</form>

The PHP

//the name of the passed image
//example would be:   http://myapplication.com/image.php?i=photo.jpg
$src = $_GET['i'];

//folder where the images are
$src_folder = 'images/';

//folder where the thumbnails will be saved to
//you may need to chmod 775 or 777 this folder
$thumb_folder = 'images/thumbnails/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

	require('inc/imagemanipulation.php');

	$objImage = new ImageManipulation($src_folder . $src);
	if ( $objImage->imageok ) {
		$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
		$objImage->save($thumb_folder . 'thumbnail.' .$src);
	} else {
		echo 'Error!';
	}
}

The jQuery

function updateCoords(c) {
	$('#handw').show();
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $('#pich').html(c.h);
  $('#picw').html(c.w);
};

function checkCoords()
{
  if (parseInt($('#x').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

jQuery(document).ready(function() { 

	$(window).load(function(){
	var api = $.Jcrop('#cropbox',{
    onChange: updateCoords,
    onSelect: updateCoords,
    boxWidth: 500,
    boxHeight: 500
  });
  var isCtrl = false;
	$(document).keyup(function (e) {
		api.setOptions({ aspectRatio: 0 });
		api.focus();
		if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 81 && isCtrl == true) {
			api.setOptions({ aspectRatio: 1 });
			api.focus();
		}
	});
});

});