I thought this would be a trivial task. Create an image based on some text. I wanted the image to be the size of the text. I also wanted the image to be transparent. Sounds straight forward and not very complicated considering I have cfimage at my disposal.

However, in attempting to do this I found it to be rather complicated. The process to figure out the text size and then size the image is not so trivial. Then creating the transparency was another challenge.

Lucky I had done part of this before. I previously created a process to watermark images with cfimage. Thankfully I was able to take that code and re-purpose it for what my new need.

Below is the code in all its glory. Reading through the comments will give you an idea of what is going on. The end result of the function is the return of an image object. You can then take that and write it to the browser r save it to the drive.

What basically happens is that I take some text and then use java objects to get its pixel sizing. Use that information to create a transparent image sized to fit the text then draw the text onto it.

view plain print about
1<cfscript>
2    
3    function genImgTxt(txt){
4        local.thisTxt = arguments.txt;
5        local.objAttributes = {Font = "Tahoma",    Size = "12",    Style = "bold"    };
6        
7        // create image and write text on to it.
8
        local.objTxtSizing = ImageNew( "", 1, 1);
9        ImageDrawText(local.objTxtSizing,    local.thisTxt,    1,    1,    local.objAttributes    );
10        
11        // java stuff to get pixel size of text
12
        local.buffered = ImageGetBufferedImage(local.objTxtSizing);
13        local.context = local.buffered.getGraphics().getFontRenderContext();
14        local.Font = createObject("java", "java.awt.Font");
15        local.textFont = local.Font.init( "#local.objAttributes.font#", local.font.BOLD, javacast("int", local.objAttributes.size));
16        local.textLayout = createObject("java", "java.awt.font.TextLayout").init(local.thisTxt, local.textFont, local.context);
17        local.textBounds = local.textLayout.getBounds();
18        local.dimen.width = local.textBounds.getWidth();
19        local.dimen.height = local.textBounds.getHeight();
20        
21        // create transparent image
22
        local.imgTextObj = ImageReadBase64("data:image/gif;base64," & "R0lGODlhAQABAIAAAP///////yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==");
23
        // resize image to be slightly larger than text
24
        ImageResize(local.imgTextObj, local.dimen.width+5, local.dimen.height+8);
25
26        
27        // setup image and draw text
28
        ImageSetDrawingColor(local.imgTextObj, "
black" );
29        ImageSetAntialiasing(local.imgTextObj,    "
on"    );
30        ImageDrawText(local.imgTextObj,    local.thisTxt,    2,    local.dimen.height+2,    local.objAttributes);
31        ImageRotate(local.imgTextObj, local.angle);
32        
33        
34        return local.imgTextObj;
35    }
36    
37    
38</cfscript>

Till next time...

--Dave