2008
ColdFusion 8's Image Functions + jQuery= A UI For Adding Text and Color Blocks Into An Image file
ColdFusion , JavaScript , jQuery Add commentsOne of the new features in ColdFusion 8 is the ability to manipulate images using ColdFusion tags and functions. For example, the code below (all server-side code) will take an image file on the server, overlay it with text, and create a brand new image file in temp space and display it to the browser:
<!---Assign the image file to the carImage variable---> <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.
Mar 3, 2008 at 9:38 AM Wholly crap, I can't believe we both started the same basic idea last week and released it this morning. :-)
I didn't use jquery, but otherwise its very similar in concept.
Mar 3, 2008 at 10:21 AM Actually I released it last week, but my initial post about it didn't generate too much attention (my original post title wasn't the best).
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)?
Mar 3, 2008 at 10:31 AM I am actually making images and storing them. I have my own big server, so no big deal. Though I do need a way for people to delete images and such for when they are messing around or screw up and want to do it again.
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.
Mar 3, 2008 at 1:56 PM Well, if there's anything in mine that you'd like to emulate and you want to know more about, just ask. I don't know yet if I'm going to open-source any of my code (I'd probably have to clean it up a bit first), but I'm willing to share.
Mar 3, 2008 at 2:00 PM I am happy to share too, though its all sorta rapped up in coldbox. Lemme know. I will be looking it over in more detail after work. :-)
I really like the color block and drag/stretch you have.
Mar 4, 2008 at 8:58 AM (Grin) Once you add the Resizables jQuery UI files to an application, making a box resizable like that takes only one line of JavaScript...gotta love it.
I've been meaning to read up on ColdBox and find out what it's all about. I assume you like it?
Mar 4, 2008 at 9:43 AM I really should play with jQuery. :-)
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.
Apr 11, 2008 at 8:17 PM I'm looking for resources to get started on a similar project for my work. We need to be able to build banners on the fly using the user's input. Would you be willing to share the code? It'll be immensely helpful for me to get started on this.
Apr 12, 2008 at 2:05 PM If you don't mind the code being a bit messy, I can package it together in a .zip file and either send it to you in e-mail or put it up somewhere for download.
I'll look at the code again this weekend and try to make it a bit more readable.
Apr 12, 2008 at 2:12 PM I absolutely don't mind if its messy. I think it'll still be a very good resource for me to get started. I'm new to jquery stuff. I appreciate your help. You can email it to me or put it up somewhere from where i can download. Whichever works for you. Thanks a lot.
Apr 23, 2008 at 8:03 PM Brian,
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.
Feb 19, 2010 at 9:00 PM Would you still be able to provide this code? I have been looking into doing the same kinda thing and this would be a great starting point. Thanks!
Mar 12, 2010 at 12:39 PM I've been searching and searching for scripts that can do this. Do any of you have a working application to download? Even better, have any of you worked this into a Joomla component? There's not much for captions out there. I think if you had it listed in the Joomla forums it would get attention from all over.
Mar 12, 2010 at 12:58 PM Can you use ColdFusion with PHP? I know that many Joomla extensions use jquery, but I'm not familiar with ColdFusion. I'm looking for a captions program, they're not easy to find. Your Captionator site is actually very good, from what I've seen.
Mar 13, 2010 at 9:34 PM @Cynthia: ColdFusion and PHP are both server-side scripting languages. Normally, a website would run either PHP or ColdFusion, but not both. While it might be possible to run PHP and ColdFusion on the same webserver simultaneously, I don't know that you could make use of ColdFusion's image manipulation functions (the ones which make my Captionator site possible) within a Joomla-powered site.
Mar 31, 2010 at 9:45 AM Did you ever decide about making the code available? I just got a project that this would make a great starting point for.
Apr 5, 2010 at 9:30 PM Very nicely done! I like all the options you give the user, especially the layering! Like Paul, I would really love to see the code if you wouldn't mind sharing it (I don't care about messy, a zip file would work fine)...
Aug 16, 2010 at 10:58 AM Really nice example! Yours was the only one I could find which did this kind of thing instead of just having a lightbox type thing over the top. Would I be able to see the code you have used? It would be really useful in the project i'm working on.
Aug 24, 2010 at 7:52 AM Great job Brian - is there any chance you could send me the code in its current form for a project I'm looking at?
Will this handle hi-res (printable) images, or will it have to be lo-res screen only stuff?
Sep 13, 2010 at 7:41 PM I would really love to see your code as it is. Would you please post or email to me. This is exactly what I have been looking for.
Oct 7, 2010 at 12:06 PM Hey Brian, Your app looks awesome and would fit my project perfectly, it would be interesting to see how the ajax works since I have dug in yet. Anyway great post and if you get a chance to email it to me that would be awesome!
Dec 1, 2011 at 1:20 AM Hi Brain,
Would be greatful if you can send the source code for this script for both Coldfusion and Jquery.