Introducing cfImageCropper - Custom Tag For Client Side Image Cropping

Yesterday I decided to change my headshot on GMail and noticed that when I uploaded my new image there was a slick little tool to crop my headshot. Obviously Google is using some sort of client side JS to do the cropping and then doing the actual image resize on the server (so I assume). I was pretty impressed by this and it got me thinking how simple it would be to throw something together like this for use with the new imageCrop function in ColdFusion 8 (or any image manipulation package for that matter).

Enter the cfImageCropper custom tag. I did a bit of Googling to find a good JavaScript image cropping demo that I could use for the client side. I came across David Spurr's demo and decided to wrap it in a custom tag. The end result in my opinion is pretty damn cool.

Check the demo to see how it works, but it's essentially dead easy. Here's a quick bit of sample code:

<form name="testForm" method="post">
   <cfmodule template="../imageCropper.cfm" imageCropperName="testimage" scriptSrc="/cfImageCropper/lib/" imgSrc="castle.jpg" />
   <br />
   <input type="submit" name="submit" value="Crop This Image!" style="font-weight:bold;" />
</form>

This tag simply creates a croppable image. Drag and drop the crop area to see it work. When the crop is complete the tag updates six hidden form fields that you can then use to crop the image on the server. The form fields will be prefixed with "imageCropperName_" so that you can use the tag multiple times on a page if need be. Take a look at the form dump on my demo to see what fields are created.

Documentation will follow - but for now most of the options listed on David's page are supported as attributes in the tag. The main difference is the variables that he's using as objects (structs) I have broken out into individual prefixed attributes. Check the custom tag itself to see what these are for now.

The really cool thing about this is that you can constrain the maxWidth/maxHeight, aspect ratio, etc in your crop area. Imagine having a site where your users can upload a personal image or headshot that you would like to keep constrained to 150px X 150px. This would be dead simple with this tag and the magic of ColdFusion 8.

Comments
This just f-ing rules! Now I just have to fine a use for it.
# Posted By Dave Ferguson | 8/2/07 10:30 AM
Wow... That is LEAGUES better than the cropper you have to use for your google image!!
# Posted By Robert Owen | 8/2/07 10:33 AM
Awesome job Mr. Sharp.
# Posted By Todd Rafferty | 8/2/07 10:47 AM
AWESOME!!
# Posted By Dan Byron | 8/2/07 10:49 AM
Wow! That is really fantastic. Really useful too. It's getting all kinds of praise at my office :)
# Posted By Gareth | 8/2/07 10:55 AM
Just building an image upload with the new cf8 image functions. Your tag will be a great addition. Thanks,
# Posted By Dave Farr | 8/2/07 11:09 AM
If only we could use file upload with Ajax stuff in CF 8... :(
# Posted By todd sharp | 8/2/07 11:12 AM
Todd,

That is a really sharp custom tag (no pun intended honestly!).

So many new Image functions to play with and so many ways to use them both server side and client side!
# Posted By Gary Gilbert | 8/2/07 11:25 AM
Todd,

This is a truly useful tool. Thank you for taking the time to do this.
# Posted By Steve Walker | 8/2/07 11:36 AM
There is another tag in the package that I forgot to mention. I'll blog it later, but if you download and want to use this with CF 8 Ajax stuff (like cfwindow) you can use a cf_ImageCropperScriptImport on your main page to import the JS stuff (in CF8 you need to do this) on the page that calls the window...

And thanks for all the nice comments guys! Drop a line if you use it in your app!
# Posted By todd sharp | 8/2/07 11:40 AM
Awesome
# Posted By Sam Farmer | 8/2/07 12:13 PM
Tags is excellent, Another cool addition would be to have a fixed size selection box where the user simply moves the selection box over the portion of the photo they want to crop.

Just a thought, Great work.
# Posted By Cory Toth | 8/2/07 12:28 PM
That can be done - though my non-existent documentation wouldn't lead you to believe that.

minWidth, minHeight, maxWidth, maxHeight are all optional attributes. Set them all and you've got what you're looking for.
# Posted By todd sharp | 8/2/07 12:38 PM
Correction: there is a bug with maxWidth, maxHeight, etc...simple fix...working on it...
# Posted By todd sharp | 8/2/07 1:06 PM
Great work man. Easy to use, responsive interface and fast processing!
# Posted By Adam Fortuna | 8/2/07 2:38 PM
Cory: Is this what you meant?

http://h127171.cf8beta.com/cfImageCropper/test/tes...

I'll post the bug fix that is necessary for this to work tonight - basically my tag kinda was ignoring a few attributes, but the fix will be in the next zip.
# Posted By todd sharp | 8/2/07 3:01 PM
You sir are a gentleman and a scholar!

Bad Ass!

Viva RiaForge!
# Posted By Adrock | 8/2/07 6:28 PM
Outstanding Todd, nice work!
# Posted By Michael Sharman | 8/2/07 7:32 PM
This is awesome..Is there any way to get it to work on CF MX7? I definitely want to use it but don't plan to upgrade for about 3 months...

Thanks!
# Posted By Jason | 8/2/07 8:06 PM
The tag itself should work with 7 - the image cropping action is made easy with 8, but it's not necessary to use 8 to crop the image on the server.

To do that check out Rick Root's imageCFC or Doug Hughes Alagad Image component. They should be able to handle the cropping AFAIK.
# Posted By todd sharp | 8/2/07 8:32 PM
Very well crafted!

So useful I might just toss it into a client's site without asking them :)
# Posted By Clark Valberg | 8/2/07 9:08 PM
Excellent work!

I can think of quite a few uses I'd have for this :)
# Posted By James Netherton | 8/3/07 4:40 AM
Hi, thanks for it. I have a question, if some way to do it in PHP? because i dont know that CFM language, and i need do the same that gmail (like you say). And need crop a image and upload this new image. But i can't understand you source code of .cfm
# Posted By Alvaro | 8/26/07 9:20 PM
Do you have any idea on how to make an "automatic cropping" for example to remove white space around an image ?

I think about loops with a test of the color of each pixel in a row/column and remove them if they are all white, but CF8 does not seems to offer this (retrieve the color of an x/y pixel).
# Posted By Obouillaud | 10/5/07 10:36 AM
But how to crop rotated image?
It will be wonderful when we would to rotate an image in background, set wrap pattern and then upload and crop with rotation (and maybe other graphic processes available by class.upload.php). My wisdom lvl is to basic to edit cropper.js script to make that change (a know only how to rotate image without cropping mask recalculating).
# Posted By Radoslaw Prabucki | 10/14/07 11:20 AM
Excellent work!
tnk!!!
# Posted By SneG | 11/3/07 2:24 PM
Wicked - I might integrate this into my Auction system
# Posted By Martin Parry | 11/16/07 9:57 AM
Why dont you have an auto preview in this tag? I modded your tag to add this if you want to include it just let me know.
# Posted By patrick | 12/15/07 7:25 AM
Patrick: Send me what you've got I'll take a look.

Thnx.
# Posted By todd sharp | 12/15/07 2:33 PM
Very good job. I will integrate it into my e card website.
# Posted By Raj | 1/4/08 5:46 AM
Raj - your e card website is PHP - how are you going to integrate my custom tag? Or were you just referring to the JavaScript?
# Posted By todd sharp | 1/4/08 11:44 AM
Nice Job! One small problem... I use this tag multiple times on the one page using a unique name for each. However, only the last image crop works. Do you have a demo of this tag working when used more than once on a page?
# Posted By Ben | 3/10/08 1:12 AM
I was just following some referrers to my site (it's been a while since I have) and came across this.

Looks like a nice implementation of my cropper UI, we used Coldfusion at work and that's where the cropper idea first came from - I did the cropper in my spare time but the integration with CF at work so I couldn't open that code up like I could with the UI.

I've bookmarked this page as part of V2 of the cropper I want to have a gallery of back-end implementations that work with my cropping UI. Let me know if you'd be interested in that.
# Posted By David Spurr | 3/12/08 6:22 PM
Great work man. Really easy to use this.
# Posted By szitakalman | 6/13/08 5:44 AM
Just building an image upload with the new cf8 image functions. Good works
# Posted By Alex Griffin | 6/16/08 4:05 AM

Calendar

Sun Mon Tue Wed Thu Fri Sat
  12345
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31   

Subscribe

Enter your email address to subscribe to this blog.

Tags

actionscript ajax blogging cfsnippets coldfusion flash forms flex misc model-glue off topic personal project learn slidesix sql

Recent Comments

More CF+Java: Compiling Classes And Persisting Objects
Getburl said: I have been attempting to get Db4o working in my CF application and I have not succeeded. I would lo... [More]

Thoughts On Ajax Frameworks And ColdFusion/Adobe
Erast said: http://fanniecollins.10gb... emo http://gracetrevino.phree...... [More]

Extending Ext With Ext Extensions
Erast said: http://fanniecollins.10gb... emo http://gracetrevino.phree...... [More]

CF Needs An Open Source Contact List Importer
Kay Smoljak said: Heh, the fact that sites DO it doesn't mean they SHOULD. To us it's ok, but to a non-tech-savvy user... [More]

A Few Project Updates
Helena said: Now punctually what is the situation ? [More]

RSS


coldfusionbloggers

FullAsAGoog MXNA

Consumed By Feed-Squirrel.com