ASP 101 - Active Server Pages 101 - Web05
The Place ASP Developers Go!

Please visit our partners

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates

ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
The Top 10 ASP Links @
What is and Why Do I Need It?
An Overview of ASP.NET

Date Delimiter for Access and SQL Server
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Generating Text Images on the Fly with ASP.NET

by John Peterson


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
' 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

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.

Related Information

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers