I was recently building a new page for a client who required a CAPTCHA to prevent spamming. Great, I thought: I can use ColdFusion 8's <cfimage> tag; which I did, and it was really simple to do.
Shortly after the page went live, I started getting complaints that a lot of the time, the CAPTCHAs were dark, murky, and often unreadable. I couldn't work out why: I'd done some test pages with <cfimage>, and they always looked perfect...
More test pages, and they still looked fine; but on the clients page they were still really dark. Extensive Googling provided no solutions - or even any hint that anyone else might be having the same issue!
And then it hit me: the problem was that the page had a black background; the generated CAPTCHA images had an alpha-transparency background - and so the black was showing through, and making everything dark.
As an example, here are a couple of <cfimage>-generated captchas, as they would appear on a white page:
And here are the same images on a black background:
The solution, since you can't apply a background-color directly to the <cfimage>, is to wrap your CAPTCHA image in a <div> the same size as the image, and set a background-color of white on that.
And Adobe: please, in the next bug-fix for CF8, add a solid white base layer to the generated CAPTCHA images...
Jan 15, 2008 at 12:22 PM Seb, very interesting. What's strange is that on the white background, these images don't seem to have a transparent background. Even the ones you have have a pink and light gray background respectively. I wonder why those same images seem to have *no* background on darker pages.
Jan 15, 2008 at 12:37 PM The pink background is actually a much darker colour, but with a high transparency (or is that low?) - probably about 5-10%. So, on the white background it shows as pink; against the black it becomes a really dark pink. Similarly with the grey one - it's actually black but almost totally transparent, which when overlaid on black just gives you black!
Jan 18, 2008 at 4:50 AM If you use the <img> div tag for the background, will it help? We have logged a bug for the same.
Jan 18, 2008 at 7:53 AM @Hemant: not quite sure what you mean? I have a <div> wrapped around the cfimage to provide a background; not sure how you'd do this with an <img> tag?
Jan 23, 2008 at 4:24 AM I think I misunderstood it a little bit. We have logged a bug for the same. Thanks, Hemant
Apr 17, 2008 at 7:08 PM Doesn't seem to be fixed in ColdFusion 8.01...