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.
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.
My first issue is that I get an error that I can't nest a cfinput inside a form tag. So I change the form from a form to a cfform. Then it works but I am unable to conjure up the crop window. I downloaded your tag from RIAforge and added the lib js files from the demo.
I have worked on this thing for a few hours and broke my entire site once but that was sort of unrelated. Anyway if you could help out I would appreciate it.
http://www.mediadeliver.com/cfImageCropper/test/te...
My first issue is that I get an error that I can't nest a cfinput inside a form tag. So I change the form from a form to a cfform. Then it works but I am unable to conjure up the crop window. I downloaded your tag from RIAforge and added the lib js files from the demo.
I have worked on this thing for a few hours and broke my entire site once but that was sort of unrelated. Anyway if you could help out I would appreciate it.
http://www.mediadeliver.com/cfImageCropper/test/te...
Putting cfImageCropper to good use has been on my todo list for a year (jsCropper for two).
I just finished implementing it and I wanted to pass on some tidbits to fill in a gap or two. [Don't want to say], this should help;
1. The cfImageCropper zip doesn't contain all the files you need.
2. The docs refer to the optional scriptSrc attribute which points to the required javaScript docs you need; those files are in the lib folder of David Spurs' jsCropperUI-1.2.0.zip.
3. The test.cfm demo file holds the key to the last missing piece: cropper.css. Todd's test page points to the lib/ folder for it and David has it in the main directory. Certainly it can go anywhere but I dropped in the lib folder for the test and all was right in the world of cropping castles.
So to sum up; Your lib file should contain these 7 files:
builder.js,
cropper.js,
dragdrop.js,
effects.js,
prototype.js,
scriptaculous.js
&
cropper.css.
And not:
controls.js,
cropper.uncompressed.js,
slider.js
&
unittest.js
I've gone through about the same batch of issues. I think I'll probably get it figured out tomorrow though. Either way, I'll post a comment in the next couple days about any progress. Hope you haven't given up entirely!
it helps me
Follow Vid's instructions to a T and it will work. Very strange that deleting js files makes it work but it does.
My link doesn't go to a working page. I moved it somewhere else and got it up and running. I will come back here and post a working version if I get a chance.
That way one could display a complete doc, do your crop mask over, say the signature, display the crop (eg signature) in an overlay window at magnified res.
Like, "Do you recognize this doc?" then, run your crop and display zoomed window, "and is this your signature?"