If you follow my blog you have probably seen a few previous posts about a plugin I have been working on to use Uploadify, jCrop, jQuery, and Impromptu to upload and crop images. The plugin is relatively small, but ties together other plugins to make things flow smoothly. Here is a video of it in action:

Ok, to get started you will need a copy of Uploadify, Impromptu, jQuery, and UberUploadCropper. Include them all in your page including their default CSS. Now to configure this puppy you can use most all the options for jCrop and Uploadify, so you can tweak how you want to scale, crop, etc.. (trust me when I say there are many ways to approach this, I will let you decide). Lets start with an html file input element and an img to show the preview:


<img src="/path/to/img.jpg" alt="Current Image" style="height: 85px;" id="PhotoPrev" />
<input type="file" id="UploadPhoto" name="UploadPhoto" />

Now to activate the plugin.. (be sure to place this inside of a document load event):


$('#UploadPhoto').uberuploadcropper({
		//---------------------------------------------------
		// uploadify options..
		//---------------------------------------------------
		'uploader'  : 'jquery.uploadify/uploader.swf',
		'script'    : 'path/to/upload/script/',
		'checkScript':'path/to/check/script',
		'cancelImg' : 'jquery.uploadify/cancel.png',
		'multi'      : false,
		'auto'      : true,
		'folder'    : '/path/to/upload/image',
		//---------------------------------------------------
		//now the cropper options..
		//---------------------------------------------------
		//'aspectRatio': 1,
		'allowSelect': false,			//can reselect
		'allowResize' : false,			//can resize selection
		'setSelect': [ 0, 0, 200, 220 ],	//these are the dimensions of the crop box x1,y1,x2,y2
		//'minSize': [ 100, 100 ],		//if you want to be able to resize, use these
		//'maxSize': [ 100, 100 ],

		//---------------------------------------------------
		//now the uber options..
		//---------------------------------------------------
		'cropScript': '/path/to/crop/script/',
		'onComplete': function(imgs,data){
			$('#PhotoPrev').attr('src', imgs[0].name +'?d='+ (new Date()).getTime());
		}
	});

Now the only thing left is the serverside scripts to upload and resize the images. For the most part you can start with the scripts provided with Uploadify, with a couple exceptions. In the upload script you will need to scale down the image to a reasonable size, but maintain the original aspect ratio so it will fit inside an Impromptu window. The second is that you must create a new file to actually crop the image once the selection has been made. For this file all of the information will be passed as a post variable. Since I develop in PHP and I originally intended on being able to upload multiple image and queue them up to crop, I pass an array of properties to this script named “imgcrop”, similar to the following:


imgcrop = [
	{ name: 'filename1.jpg', x: 0, y: 0, w: 200, h: 220 },
	{ name: 'filename2.jpg', x: 0, y: 0, w: 200, h: 220 },
	{ name: 'filename3.jpg', x: 0, y: 0, w: 200, h: 220 }
]

To perform this crop properly you should loop through and resize each image. Performing the crop is super easy with PHP. Check out the docs here.

Unfortunately, there is a bug in the plugin preventing cropping more than one image. This is where I turn to you guys/gals for help. If you enjoy this plugin and are able to make any nice advances with it please feel free to post updates here. My time has been limited lately for development but I will try my best to update the code. The last Uploadify which it was used with was version 1.6.2. I know Uploadify has changed a good bit since then so it might be best to start with the older version and try upgrading. Also feel free to post suggestions as well. Enjoy!

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter

Related posts:

  1. Uber Update
  2. Uberuploadcropper – Cropping Gone Wild!
  3. Possibly the Best SVN Plugin for gEdit
  4. Meet jQuery iFramer
  5. A Nice, Clean jQuery iFramer Example