Add variable length text to image with different text configuration by line

Question

We are dealing with image a lot lately and we were able to write text with different text configuration like, font, fontsize, color etc., on each line. Everything is going good so far.

Now, our requirement is to read text from db (one to many lines) which will be variable length by user and need to somehow fit everything in that image without text overflowing. Possibily adding line breakswhich will still use same text configuration. This can lead to more than 1 line on the image. Next, read seond line from DB and repeat the same process except this time text configuration may or may not be same.

Started researching on using CFImage tag but will not give me height and width of the text so I can determine the coordinates of the next line.

Also, tried to do some research on awt* classes and methods but stuck with same problem.

I'm working with CF18 and cannot seems to find anything which can solve my problem unless I'm approching this all wrong.

I'm looking for guidence on how this can be tackled. Is it by investing in some softwate or can use any third party libraries etc.,? I'm going to do my own POC if I know what are available in market. I did some quick google search on java libraries and came up empty.

Thank You so much in advance.

James Moberg · Answer

We generate lots of custom images, but avoid using ColdFusion's built-in image tags. The results we wanted to achieve have layout requirements that aren't possible with image components. Our approach has been to generate HTML5 with CSS3, webfonts, SVG and even a little javascript to auto-size fonts so that we could keep the text within a certain zone. We then use WKHTMLTOPDF (or WKHTMLTOImage) to convert the HTML to an image. (If you are accessing HTML content on a 3rd party that explicitly blocks WKHTMLTOPDF, another great solution is using NodeJS + Puppeteer.)

Using these self-hosted libraries enable us to add gradients, CSS shadows, SVG logos and transparent watermarks, add PIP photo overlays using CSS "cover", align text to bottom and have it expand upwards and even use fonts that image generation libraries may not be compatible with. We're basically performing a server-side screen capture of an HTML page.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded