Welcome!

ColdFusion Authors: Maureen O'Gara, Hovhannes Avoyan, Yakov Fain, Pat Romanski, Liz McMillan

Related Topics: ColdFusion

ColdFusion: Article

CFImage Part 2

Tag-based image manipulation

When you rotate an image to something other than a multiple of 90 degrees, the problem you get is that the image no longer fits nicely on the existing canvas. For this to work, the canvas size has to increase to accommodate the diagonal width of the graphic. Let's give it a go:

<!---
Take the modified image and rotate it 225 degrees. This
will not fit into a 90 degree increment and will cause
the canvas size to increase.
--->
<cfimage
action="rotate"
source="#objImage#"
angle="225"
name="objImage"
/>

<!--- Write the new image to the browser. --->
<cfimage
action="writetobrowser"
source="#AddImageInfo( objImage )#"
/>

Running the above code, we get the image in Figure 7.

See how the image canvas size had to increase. The background fill color is black. I couldn't figure out how to change this fill color using any of the Image manipulation functions including ImageSetBackgroundColor() and ImageSetDrawingColor(). I'm sure this can be changed, but I just couldn't figure out where to set it.

CFImage - CAPTCHA Creation
CAPTCHA stands for "Completely Automated Turing Test To Tell Computers and Humans Apart" and is great for helping to prevent spam bot form submissions. When using CFImage to create a CAPTCHA graphic, the related attributes (in addition to the standard CFImage attributes) are:

  • Height
  • Width
  • Text
  • Difficulty (optional)
  • Fonts (optional)
  • FontSize (optional)
The height and the width attributes are both required and must be defined in pixels. These are not just arbitrary values; larger height and width values will space the given text out differently. Also, there are minimum values for the width; for the CAPTCHA image to display properly, the width value must be greater than the FontSize times the number of characters specified in text times 1.08. Luckily, if you try to use a width that is not adequate, ColdFusion will throw a fairly useful error:

Verify your inputs. The specified width for the CAPTCHA image is not big enough to fit the text. 363

Here, ColdFusion is telling you that the width is not big enough. What is less clear, but super useful, is that number at the end, 363, is the minimum width that the CAPTCHA image can be.

The text attribute is the text that's displayed in the CAPTCHA image. The point of the CAPTCHA functionality is not to create the text; it is to make it funky. You have to supply the text. Furthermore, there is nothing inherent to the CAPTCHA tag that will submit this text value in a form submission. If you want to use this with form submissions, you have to be sure to submit the text yourself (probably in some encrypted fashion).

The difficulty, which defaults to Low, determines how crazy the CAPTCHA image is.

Fonts is a comma-delimited list of fonts that will be randomly used to render characters within the CAPTCHA image. You can't just use any old font here; according to the documentation, ColdFusion supports only the system fonts that the JD can recognize. For example, TT fonts in the Windows directory are supported on Windows. FontSize, which defaults to 24, determines the size of the characters displayed in the image.

Let's take a look at it in action. I'm going to loop over the different difficulty levels so you can see how they affect the way the image is rendered (see Listing 5).
Notice that we are not supplying a destination for the CFImage tag in this demo. If we leave out that attribute, ColdFusion will display the CAPTCHA image as an inline image similar to the WriteToBrowser action for other images. This will create random image names; however, if you do supply a destination, be very careful to not overwrite images that might be in use by other users in parallel requests (otherwise, their image might not correspond to the value that is required).

Running the above code, we get Figures 8, 9, and 10.

That's basically the rundown on how you can use the CFImage tag to manipulate images in ColdFusion 8.

The ColdFusion 8 CFImage tag does some fantastic stuff. But to be honest, it only begins to scratch the surface of what ColdFusion 8 can do in terms of image manipulation. I am trying to keep a good balance here between info and deep exploration in these articles because there is just such a huge wealth of functionality to get through. I hope that seeing the quality and functionality of the CFImage tag will get you excited for more.

•  •  •

This article was reprinted with permission from Ben Nadel's blog: www.bennadel.com/index.cfm?dax=blog:772.view.

More Stories By Ben Nadel

Ben Nadel has worked with ColdFusion for eight years and is a super ColdFusion enthusiast. He blogs regularly about all aspects of Web development on his personal site, http://www.bennadel.com, and does his best to give back to the ColdFusion community through online code demos and his "Ask Ben" blog posts. He is also a Certified Advanced ColdFusion MX7 developer and is one of the lead programmers at Nylon Technology.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.