Have you ever needed to have an image of some text generated dynamically
on the fly? There are tons of possible applications for this type of thing
which I won't go into, but prior to ASP.NET it was a relatively
difficult thing to do. Well no more...
I know I promised that I wouldn't go into them, but one of my favorite
uses of this type of thing is to tell human visitors to your web site
apart from computer visitors (spiders). By generating an image with a
text message, you can ask visitors to type in the text to verify that
they're not a computer. Granted there are computer programs
(OCR or optical character recognition programs) that can do this
type of thing, but they're relatively complex to write and are
pretty easily fooled by picking weird fonts or distorting the images
slightly. Most of the bigger web service providers like those that provision
free email accounts or free web space have already implemented something like this.
For more info, check out the CAPTCHA Project.
The 8 page technical report available from the site's
home page makes for an interesting read if you're interested in the topic.
The Code
I'm sure there are other ways to do this, but this is the basic form I
came up with via some trial and error:
<%@ Page Language="VB" Debug="True" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import Namespace="System.Drawing.Text" %>
<%
' Declare Vars
Dim objBMP As System.Drawing.Bitmap
Dim objGraphics As System.Drawing.Graphics
Dim objFont As System.Drawing.Font
' Create new image - bitmap
objBMP = New Bitmap(100, 30)
' Create a graphics object to work with from the BMP
objGraphics = System.Drawing.Graphics.FromImage(objBMP)
' Fill the image with background color
objGraphics.Clear(Color.Green)
' Set anti-aliasing for text to make it better looking
objGraphics.TextRenderingHint = TextRenderingHint.AntiAlias
' Configure font to use for text
objFont = New Font("Arial", 16, FontStyle.Bold)
' Write out the text
objGraphics.DrawString("ASP 101", objFont, Brushes.White, 3, 3)
' Set the content type and return the image
Response.ContentType = "image/GIF"
objBMP.Save(Response.OutputStream, ImageFormat.Gif)
' Kill our objects
objFont.Dispose()
objGraphics.Dispose()
objBMP.Dispose()
%>
The above code outputs an image that looks like this:
I'm having some troubles getting a solid background in certain colors
so if anyone has any idea why, drop me an email.
Oh and I've already tried changing image pixel formats to other things
so I don't think that's it.
While I'm asking for help... anyone know how to get these darn gifs
to have a transparent background? I've tried the MakeTransparent method,
but all I end up with is black. If you've gotten it to work
drop me an email
and I'll publish a sample here.
Another sample image generated by the included scripts:
The Scripts
Along with the script above, the support materials for this article include
a script that outputs the time and date as an image as well as one that takes a
parameter to display. I've also included an HTML page to host all three samples
for reference. You can get all these goodies in this zip file.
