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

Notice that I am overwriting ARGUMENTS.Query by running a query of queries on ARGUMENTS.Query. This was the closest thing I could think of that would duplicate the "situation" but with a different data type. This works just as you would expect it to (creating a new copy of the query; leaving the original alone).
Sorry about the huge tangent, but I felt that it was important to cover since we are covering tag-based image manipulation. Now that we are done with that, we can actually start to explore the CFImage tag functionality. To start with, let's just read in the mud monster image and output it with its added data (notice that I will be running all images through the AddImageInfo() UDF upon output):

<!--- Read in the original image. --->
<cfimage
action="read"
source="./mud_monster.jpg"
name="objOriginalImage"
/>

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

Running the above, we get the image shown in Figure 3.

CFImage - Add Border to Image
When using CFImage to add a border, the related attributes (in addition to the standard CFImage attributes) are:

  • Color (optional)
  • Thickness (optional)
The color can take a hexadecimal value or a named color. But, come on, we are developers - we don't see colors in names, we see them in HEX! Of course, if you do want to use the named colors, CFImage supports just a select few:

Black :: ##000000
Blue :: ##0000FF
Red :: ##FF0000
Gray :: ##808080
LightGray :: ##D3D3D3
DarkGray :: ##A9A9A9
Green :: ##008000
Pink :: ##FFC0CB
Cyan :: ##00FFFF
Magenta :: ##FF00FF
Orange :: ##FFA500
White :: ##FFFFFF
Yellow :: ##FFFF00

We are using the double hash (##) in the color names because when they are used as tag attributes, ColdFusion is going to try to evaluate the stuff between hash signs. What's going on here is that the double hash is just an escaped hash in the tag attribute. The border color defaults to black if you don't include it.

The thickness is the width of the border in pixels. This defaults to 1 if you don't include it.
Let see it in action:

<!---
Take the original image and add a border (save
it into a new image variable).
--->
<cfimage
action="border"
source="#objOriginalImage#"
color="##333355"
thickness="2"
name="objImage"
/>

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

When we run that, we get the image shown in Figure 4.

Notice that this new image is bigger in dimension to the original image. When adding a border, the border gets added to existing image, there by increasing its height and width by double the thickness of the rule.


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.