Click here to Skip to main content
Click here to Skip to main content
Go to top

Generate an Image with a Random Number

, 29 Nov 2006
Rate this:
Please Sign up or sign in to vote.
Generate an image with a random code number for user identification.

Sample Generated Code Image

Introduction

We need to check if it is a real person who is registering on our Web site. So we decided to generate an image with a random code, hidden for robots, and feed it to the browser instead of a page response. We show it in our registration form, and let the user enter the code to check it.

Create the Web Project

  1. File -> New -> New project

    Create a new CodeImage Visual Basic ASP.NET Web Application.

Change the Web Form

  1. Rename WebForm1.aspx to CodeImage.aspx. Open it.

  2. Switch to HTML View (Right click -> View HTML source).

  3. Remove all HTML code. Leave only the <%@ Page ... %> header.

  4. Switch to Code View (Right click -> View Code).

Change the Page_Load method with the code to generate the random code image. Also set Session("hiddenCode") to allow code checks later:

Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
    'Put user code to initialize the page here


    ' Create a Bitmap image

    Dim ImageSrc As System.Drawing.Bitmap = _
        New System.Drawing.Bitmap(155, 85)


    ' Fill it randomly with white pixels
    For iX As Integer = 0 To ImageSrc.Width - 1
        For iY As Integer = 0 To ImageSrc.Height - 1
            If Rnd() > 0.5 Then
                ImageSrc.SetPixel(iX, iY, System.Drawing.Color.White)
            End If
        Next iY
    Next iX

    ' Create an ImageGraphics Graphics object from bitmap Image
    Dim ImageGraphics As System.Drawing.Graphics = _
        System.Drawing.Graphics.FromImage(ImageSrc)

    ' Generate random code. 
    Dim hiddenCode As String = (Fix(Rnd() * 10000000)).ToString
    ' Set Session variable
    Session("hiddenCode") = hiddenCode

    ' Draw random code within Image
    Dim drawFont As New System.Drawing.Font("Arial", _
                    20, FontStyle.Italic)
    Dim drawBrush As New _
       System.Drawing.SolidBrush(System.Drawing.Color.Black)
    Dim x As Single = 5.0 + (Rnd() / 1) * (ImageSrc.Width - 120)
    Dim y As Single = 5.0 + (Rnd() / 1) * (ImageSrc.Height - 30)
    Dim drawFormat As New System.Drawing.StringFormat
    ImageGraphics.drawString(hiddenCode, drawFont, drawBrush, _
        x, y, drawFormat)

    ' Change reponse content MIME type
    Response.ContentType = "image/jpeg"

    ' Sent Image using Response OutputStream
    ImageSrc.Save(Response.OutputStream, _
                  System.Drawing.Imaging.ImageFormat.Jpeg)

    ' Dispose Objects used
    drawFont.Dispose()
    drawBrush.Dispose()
    ImageGraphics.Dispose()

End Sub

Build the Solution (F7), and run the application (F5).

Create the Check form.

  1. Create a New Default.aspx Web Form (Right click CodeImage project -> Add -> Add Web Form).

  2. Right click Default.aspx -> Set As Start Page. Open it.

  3. From the IDE menu, click View -> Toolbox. From the HTML tab, drag an Image control to the form. Right click Image -> Properties. Set the image source to "CodeImage.aspx". Set the alternate text to "Hidden Code". Click Apply. Click OK.

  4. From the HTML tab, drag a Label control to the form. Click it twice. Change the text to "Enter the code in the image:".

  5. From the Web Forms tab, drag a TextBox control to the form.

  6. From the Web Forms tab, drag a Button control to the form.

  7. From the Web Forms tab, drag a Label control to the form. Right click -> Properties. Set the Text property to Nothing.

Double click the Button1 button control, and change the Button1_Click code to:

Private Sub Button1_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles Button1.Click
    If TextBox1.Text <> Session("hiddenCode") Then
        Label1.Text = "Wrong Code!"
    Else
        Label1.Text = "Correct Code!"
    End If
End Sub

Build and run the Web application (F7) (F5).

Points of Interest

That's it!

History

Just posted.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

rmortega77
Software Developer CIMEX S.A.
Cuba Cuba
Rodolfo Ortega is a Cuban Computer Scientist. He works as IT Auditor for the CIMEX S.A. subsidiary in Holguin, Cuba. He lives and works in Holguin, in the eastern part of the island of Cuba.

You can contact him at rodolfom[]cimex.com.cu for any personal message: Ideas on new articles, bibliography about new APIs, questions, are wellcome.

Submit questions related with current article to the article forum.

Comments and Discussions

 
Generalin C# please... Pinmemberpradeep kumarappagari6-Dec-06 22:59 
GeneralRe: in C# please... PinmemberJasmine25017-Dec-06 6:39 
GeneralRe: in C# please... Pinmemberpradeep kumarappagari7-Dec-06 18:38 
GeneralRe: in C# please... Pinmemberrmortega777-Dec-06 9:05 
GeneralRe: in C# please... Pinmemberpradeep kumarappagari7-Dec-06 18:36 
GeneralHard to read PinmemberJasmine25016-Dec-06 10:45 
GeneralRe: Hard to read PinmemberM_Johnson6-Dec-06 21:36 
GeneralRe: Hard to read PinmemberJasmine25017-Dec-06 6:37 
I thought of that, but the thing is... any of these image verifications are going to be subject to that problem. There's a certain point where it becomes so hard to read, that neither OCR nor a human being will be able to decode it. The image posted on the article is pretty close to that level. This system is not designed to defeat an OCR-based attack... and the spammers aren't going to go to that length. There's so many sites that don't use this that it's a waste of time for them to start doing that - they will just make their attack somewhere else. Remember, the power of spammers comes from the ability to hit millions of people in a short time... anything that slows them down is good. It doesn't have to be impossible to beat, it only has to be slightly harder than having nothing at all. It's like the lock on your front door... pretty low-tech security, and isn't going to stop someone who's determined to get in, but it's pretty effective at keeping most people out. When you start to go to extreme lengths, you start keeping your customers out too. If I can't read an image on the first or second try... I'm pretty frustrated. My eyesight is average 20/20, and I'm not color-blind or anything, but I see quite a few of these image verification things that I have trouble with.
 
I don't know of any research on this, but I would bet that OCR technology is getting pretty close to the human eye at recognising letters.
 
"Quality Software since 1983!"
http://www.smoothjazzy.com/ - see the "Programming" section for (freeware) JazzySiteMaps, a simple application to generate .Net and Google-style sitemaps!

AnswerRe: Hard to read Pinmembermdekok30003-Nov-07 9:59 
GeneralPerformance Fix... PinmemberJon Rista29-Nov-06 10:46 
GeneralRe: Performance Fix... Pinmemberrmortega774-Dec-06 3:21 
GeneralRe: Performance Fix... PinmemberMember 418550221-Sep-08 18:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140905.1 | Last Updated 29 Nov 2006
Article Copyright 2006 by rmortega77
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid