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:
<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.
RSS
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!
This is a truly useful tool. Thank you for taking the time to do this.
And thanks for all the nice comments guys! Drop a line if you use it in your app!
Just a thought, Great work.
minWidth, minHeight, maxWidth, maxHeight are all optional attributes. Set them all and you've got what you're looking for.
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.
Bad Ass!
Viva RiaForge!
Thanks!
To do that check out Rick Root's imageCFC or Doug Hughes Alagad Image component. They should be able to handle the cropping AFAIK.
So useful I might just toss it into a client's site without asking them :)
I can think of quite a few uses I'd have for this :)
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).
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).
tnk!!!
Thnx.
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.