cfimage generating unreadable CAPTCHAs
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 client’s 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…
Comments
- Ben Nadel
-
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.
- 15 January 2008, 12:22
- Reply
- Seb Duggan
-
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!
- 15 January 2008, 12:37
- Reply
- Hemant
-
If you use the <img> div tag for the background, will it help?
We have logged a bug for the same.
- 18 January 2008, 04:50
- Reply
- Seb Duggan
-
@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?
- 18 January 2008, 07:53
- Reply
- Hemant
-
I think I misunderstood it a little bit. We have logged a bug for the same.
Thanks,
Hemant
- 23 January 2008, 04:24
- Reply
- Seb Duggan
-
Doesn't seem to be fixed in ColdFusion 8.01...
- 17 April 2008, 19:08
- Reply
- Pablo
-
You could simply add a style-tag to the CFIMAGE, works fine: <cfimage action="captcha" text="#word#" difficulty="low" fontSize="30" width="300" height="45" style="background-color:white;">
- 03 June 2009, 14:49
- Reply
- David
-
Pablo: your solution not working, is there any other better solution for that?
Seb Duggan: may i know how to set the transparency rate for the captcha?
- 16 February 2011, 08:28
- Reply
- Robin
-
Is there a way to change the background images completely? Some of them are horrible and mess up the style of the website. On a subdued site, the bright purple/yellow combos are harsh.
- 27 July 2011, 13:48
- Reply
