关于网页验证码图片点击刷新的实现

网站页面验证码方法是防止电脑攻击的一个比较常用的方法，结合本人的实践，在这里对验证码图片相关技术作一介绍，主要实现图片产生，图片生成参数自动设置，点击图片自动更换一张等常用功能．

1. 验证图片的产生

首先，建立一个validatepage.aspx页面

Public Class validatepage Inherits validateClass Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load End Sub End Class

 

其次，实现validateclass类，validatepage.aspx是一个继承自validateclass类的页面，页中无任何实质内容．validateclass类的实现代码如下：

Imports System.Web Imports System.Web.SessionState Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.HtmlControls Public Class validateClass Inherits System.Web.UI.Page ' 验证码存储键 Public Const VCODE As String = "zhaochao888666_SessionKey" '// 验证码长度 Private m_codeLen As Integer = 8 '// 图片清晰度 Private m_fineness As Integer = 80 '// 图片宽度 Private m_imgWidth As Integer = 128 '// 图片高度 Private m_imgHeight As Integer = 24 '// 字体家族名称 Private m_fontName As String = "Times New Roman" '// 字体大小 Private m_fontSize As Integer = 14 '// 字体样式 Private m_fontStyle As String = "Regular" '// 绘制起始坐标 X Private m_posX As Integer = 0 '// 绘制起始坐标 Y Private m_posY As Integer = 0 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load '// 获取代码长度设置 If Not (Request.Params("CodeLen") Is Nothing) Then m_codeLen = Int32.Parse(Request.Params("CodeLen")) End If '// 获取图片清晰度设置 If Not (Request.Params("Fineness") Is Nothing) Then m_fineness = Int32.Parse(Request.Params("Fineness")) End If '// 获取图片宽度 If Not (Request.Params("ImgWidth") Is Nothing) Then m_imgWidth = Int32.Parse(Request.Params("ImgWidth")) End If '// 获取图片高度 If Not (Request.Params("ImgHeight") Is Nothing) Then m_imgHeight = Int32.Parse(Request.Params("ImgHeight")) End If '// 获取验证码字体家族名称 If Not (Request.Params("FontName") Is Nothing) Then m_fontName = Request.Params("FontName") End If '// 获取验证码字体大小 If Not (Request.Params("FontSize") Is Nothing) Then m_fontSize = Int32.Parse(Request.Params("FontSize")) End If '// 获取字体样式 If Not (Request("FontStyle") Is Nothing) Then m_fontStyle = Request.Params("FontStyle") End If '// 验证码绘制起始位置 X If Not (Request.Params("PosX") Is Nothing) Then m_posX = Int32.Parse(Request.Params("PosX")) End If '// 验证码绘制起始位置 Y If Not (Request.Params("PosY") Is Nothing) Then m_posY = Int32.Parse(Request.Params("PosY")) End If '------------------------------------------------------ '// 生成随即验证码 Dim validateCode As String = CreateValidateCode() '// 生成BITMAP图像 Dim bitmap1 As New Bitmap(Me.m_imgWidth, Me.m_imgHeight) '// 给图像设置干扰 DisturbBitmap(bitmap1) '// 绘制验证码图像 DrawValidateCode(bitmap1, validateCode) '// 保存验证码 HttpContext.Current.Session(SK_VALIDATE_CODE) = validateCode '// 保存验证码图像，等待输出 'Response.Clear() bitmap1.Save(Response.OutputStream, ImageFormat.Gif) End Sub '/// 随机生成验证码，验证码为：A ～ Z 的英文字母 Protected Overridable Function CreateValidateCode() As String Dim validateCode As String = "" '// 随机数对象 Dim Random As New Random Dim i, j As Integer For i = 0 To Me.m_codeLen - 1 j = Random.Next(1, 5) If j Mod 2 <> 0 Then ' 26: A ～ Z Dim n As Integer = Random.Next(26) ' 将数字转换成大写字母 validateCode += Chr(n + 65) Else '0-9 Dim n As Integer = Random.Next(9) validateCode += Chr(n + 48) End If Next Return validateCode End Function ' 为图片设置干扰点 ' <param name="bitmap">位图图像</param> Protected Overridable Sub DisturbBitmap(ByVal Bitmap1 As Bitmap) ' 通过随机数生成 Dim Random As New Random Dim j, i As Integer For i = 0 To Bitmap1.Width - 1 For j = 0 To Bitmap1.Height - 1 If (Random.Next(100) <= Me.m_fineness) Then Bitmap1.SetPixel(i, j, Color.White) End If Next j Next i End Sub ' 绘制验证码图片 '<param name="bitmap">位图图像</param> '<param name="validateCode">所要绘制的验证码</param> Protected Overridable Sub DrawValidateCode(ByVal Bitmap1 As Bitmap, ByVal validateCode As String) '// 获取绘制器对象 Dim g As Graphics = Graphics.FromImage(Bitmap1) '// 设置绘制字体 ' dim font1 as Font=new Font(me.m_fontName, me.m_fontSize, (FontStyle)( enum.Parse(typeof(FontStyle), me.m_fontStyle, false))) Dim fs1 As New FontStyle fs1 = CInt(m_fontStyle) Dim font1 As Font = New Font(m_fontName, m_fontSize, fs1) '// 绘制验证码图像 g.DrawString(validateCode, font1, Brushes.Black, m_posX, m_posY) End Sub End Class

 

       2。validatepage.aspx传入参数说明

 

validatepage.aspx实现动态生成验证码图片，其参数如下：

    '// 验证码长度
    codeLen As Integer = 8
    '// 图片清晰度
    fineness As Integer = 80
    '// 图片宽度
    imgWidth As Integer = 128
    '// 图片高度
    imgHeight As Integer = 24
    '// 字体名称
   fontName As String = "Times New Roman"
    '// 字体大小
    fontSize As Integer = 14
    '// 字体样式
    fontStyle As String = "Regular"
    '// 绘制起始坐标 X
   posX As Integer = 0
    '// 绘制起始坐标 Y
    posY As Integer = 0

 

validatepage.aspx在网页中的典型调用方式如下：

 <img id="vcode" src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" mce_src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" style="cursor:pointer;" mce_style="cursor:pointer;" alt="看不清，请点击此图片更换一个" οnclick="this.src='validatepage/ValidatePage.aspx?CodeLen=4&Fineness=85&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3' + '&rndcode=' +Math.random();" />

 

3。实现点击图片更换验证码功能

 

得到验证图片后,如何实现点击验证码图片更新代码呢,首先要为验证码图片加入onclick事件，实现快速动态刷新，个人反复实践,实现方式如下:

<tr> <td align="right" class="tdwhite"> 验证码:</td> <td align="left" class="tdwhite" height="30"> <asp:TextBox ID="TextBox1" runat="server" Width="106px"></asp:TextBox> <img id="vcode" src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" mce_src="validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3" style="cursor:pointer;" alt="点击刷新验证码" οnclick="this.src='validatepage/ValidatePage.aspx?CodeLen=4&Fineness=95&ImgWidth=56&PosX=1&PosY=1&FontName=Bookman Old Style&FontSize=13&FontStyle=3' + '&rndcode=' +Math.random();" />请将此代码输入左侧的文本框内 </td> </tr>

 

其中，"&rndcode='+Math.random()"部分无任何意义,只是告诉服务器端该图片的参数已经更改,从而认为图片地址发生变化,及时返回一个新的图片。

 

至此，一个完整的验证码图片功能基本实现。如果想加入更多功能，可以直接更改validateclass类，比如实现汉字验证等等。