Dynamic text inside an image with ColdFusion
So I had a problem I had to tackle, and this is one that I've tackled before using various methods, but this one I wanted to tackle a bit differently.
Imagine a text area inside a graphic that would be at the head of a page... kinda like this one (look on the right side, the text inside the white rectangle)
And then imagine that you want that to appear on this page, but it has to be in the center of the page, it needs to be dynamic (the text on the right side) and you dont feel like making a <DIV> sit on top of the image, with text, and links... how many different ways can this be done, probably 2 or 3. however this time I wanted to harness the power of ColdFusion 8 to do this, this time. Since I know ColdFusion can write text in an image, and I already had the image, why not make the space blank, generate the text and the links from a database call and write those values to variables, then take those variables and write them to the image, and then display the image?
To accomplish this I did the following (First I had created the base Image with no text on the right hand side, just white space. I saved it as a transparent PNG and ColdFusion preserved the transparency!!)
- Read the image into memory imageNew()
- Create strings for each of the text row's
- Create an attribute structure to give size, shape and weight for the font
- Set the drawing color for the color of the text
- Use the imageDrawText() function to write each of the strings to the image at the most correct spot (note that the x/y coords are for the bottom left portion of the text
- Then I simply use the
tag to write the image to disk, and the tag to display my newly created dynamic text inside the graphic, exactly where I want.
- I used an image map on the page where you can see it live
here's my code for the output:
<cfset request.textRow1 = "1) 12 Dozen Crabs $67.99">
<cfset request.textRow2 = "2) 3 Dozen shrimp $45.00">
<cfset request.textRow3 = "3) Fresh Fish at your doorstep">
<cfset request.textRow4 = "4) Order today for tomorrow!">
<cfset attr = { font="Georgia", size="11", style="normal"}>
<cfset imageSetDrawingColor(request.texty,"black")>
<cfset imageDrawText(request.texty, request.textRow1, 563, 50, attr)>
<cfset imageDrawText(request.texty, request.textRow2, 563, 70, attr)>
<cfset imageDrawText(request.texty, request.textRow3, 563, 88, attr)>
<cfset imageDrawText(request.texty, request.textRow4, 563, 106, attr)>
<cfimage
action = "write"
destination = "images\site_images\topMenuGraphic_live.png"
source = "#request.texty#"
overwrite = "yes"
quality = "1.0">
<div align="center"><img src="../images/site_images/topMenuGraphic_live.png" usemap="#topMenuGraphic" /></div>
Portions of this code and some of the ideas came from Ray Camden's post ColdFusion 8 Image functions and text size
<cfset request.texty = imageNew('topGraphic_menu.png') />
<cfset request.texty = imageNew("",750,149,"rgb","white")>
Surely the first line is unnecessary?