The ColdFusion image text writing function is relatively simple. It can quickly write basic styles of text onto an image, but it’s not capable of going to the next line or handling texts styled with multiple fonts. There is lot of room for improvement with the ImageDrawText() function.
Last week, I had to convert an HTML-formatted string of text into an image, and ColdFusion native image functions could not do it. The shortcut is to create a pdf document using cfdocument, and then save it as an image. This process is quite time intensive, and I wanted something quicker, something fast enough that it could generate an image in less than 50 tick counts on average. So I started writing an ImageDrawHTML() function. It was more difficult than I thought it would be, and there are still a few minor tweaks that could help improve it.
HTML is like your in-laws. They come in many different formats, and you always find them where you don’t expect them to be. There are no simple rules for handling them. I had to set up some rules before I could begin.
I like tinyMCE, so I’m going to work with HTML using the tinyMCE editor––but only on text formatting functions. This means nothing complicated, like <table> or floating <div>. tinyMCE uses <span> and CSS instead of <font> or <u> or <center> tags. In other word, tinyMCE use CSS for formatting. So an ImageDrawHTML() function can handle only those––at least for now.
Here is a working example. Just type something in the rich text editor and wait a second. It will bring back a new image below.
Click on the download button to download full example and the function.
Updates :
- 31 Aug 2010 : Line break formatting bug fixed
