ColdFusion 8's Image Functions + jQuery= A UI For Adding Text and Color Blocks Into An Image file
<cfimage name = "carImage" action="read" source="ferrari.gif"/>
<!---Add the text "Fast car!" to the image and place it 10 pixels from the left and 15 from the top--->
<cfset ImageDrawText(carImage, "Fast car!, 10, 15)>
<!---Display the new image--->
<cfimage source="#carImage#" action="writeToBrowser">
A week ago, an idea popped into my head: "What if you could create a UI tool that would let a user decide what text should appear on the image and where it should appear?"
I decided to try and answer that question. The result: a working proof-of-concept that lets you add text and blocks of color anywhere on a selected image using a UI tool powered by jQuery JavaScript functions. When you're done manipulating the image, you submit the data defining your changes to ColdFusion via an AJAX call, and ColdFusion creates a new image in temp space based on that data and displays it. You can save the new image down to your computer or store the data you submitted in the database so the image you made can be reproduced without permanently storing a new image file.
The fact that it only took me a week to do this (no more than 25 hours) is a testament to both the power and simplicity of ColdFusion and jQuery.
You can try out the proof-of-concept at: http://www.swartzfager.org/captionator
Update: I updated the title as I realized that describing this as an "image captioning program" might be interpreted as simply storing captions to associate with an image, not adding the text onto/into the image.
I didn't use jquery, but otherwise its very similar in concept.
It is pretty funny how similar the apps are, but you put more work into making it an active, working application, whereas I wasn't willing to go that far with mine (at least not yet).
So are you actually storing the edited image as an image file, or are you just storing the data used to create the image (the details about the text blocks)?
I have been trying to figure out a way visually to do a stroke around the text. That and a drop shadow, and the box around text are my next plans.
I really like the color block and drag/stretch you have.
I've been meaning to read up on ColdBox and find out what it's all about. I assume you like it?
ColdBox is interesting. I don't do much with any framework, so its always something to get used to for me. I did enjoy that there is a LOT of documentation and the dashboard is very helpful. Plus Brian's Illudium code generator can make coldbox scaffolding (coldbox comes with those templates). Most of the crud operations were made quick and easy that way for me, which was handy. I had to edit a number of them for my needs, but it beats making it all by hand. It is also handy that it handles SES pretty much built in.
I'll look at the code again this weekend and try to make it a bit more readable.
I've been using your example to build my app and its coming out great. Big thanks to you. I notice a javascript error in IE though..i still couldn't fix it..I see that your example also has the same javascript error in IE. If you fix it please do let me know.