实现Web验证码图片原理

实现验证码的基础

GDI+ graphics device interface plus的缩写，即图形设备接口。GDI+为开发者提供了一组实现与各种设备(具有图形化能力但不涉及图形细节的设备)进行交互的库函数。C#通过Bitmap类创建位图对象、Grephics类创建画板对象，再通过Pen类、Brush类、Color类等画位图：

Point结构 在二维平面中 定义点坐标的有序对。常用于定义 窗体或控件位置、其他图形(线条/矩形等)边界。

创建：Point p = new Point(30,90);

IsEmpty属性检测Point结构是否为空。

Size结构 存储有序整数对。常用于定义 窗体、空间呵其他矩形区域的大小。

第一个构造函数接受一个Point结构： Point p = new Point(30,90);

                                               Size s = new Size(p);

第二个构造函数接受二个int值：Size s = new Size(30,90);

主要属性：Whdtn、hight、isEmpty

Rectangle结构 存储四个整数(表矩形位置和大小)。由一个定义左上角的Point结构 和 一个定义大小的Size结构 组成。

主要属性：Location 左上角坐标、Size 矩形大小、Height/Width 矩形高宽、Left/Right  左右边x坐标、Top/Bottom 上下边y坐标、isEmpty

 

 

实现验证码主要语法：

//位图对象 Bitmap bmp = new Bitmap(120,32);

//画板对象 Graphics gp = Graphics.FromImage(bmp);

//画板背景色 gp.Clear(Color.Silver); 默认为black

//起点对象 Point p1 = new Point(0, 4);      

//画笔对象 Pen p = new Pen(Color.Red);

//画刷颜色 Brush s = Brushes.Red;

//文字对象 string code = "";

//文字保存到会话中 Session["checkcode"] = code;

//画板绘制文字 gp.DrawString(code, new Font("楷体", 14), s, p1);（内容，字体，颜色，起点坐标）

//位图输出到页面  bmp.Save(Response.OutputStream, ImageFormat.Gif);

开始验证码的实现：

一、创建一个一般应用程序(yzm.ashx)

using System.Drawing; （此命名空间给GDI+提供基本图形处理功能的访问。）
using System.Drawing.Imaging;
 

public class YZM : IHttpHandler,System.Web.SessionState.IRequiresSessionState {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/JPEG";///将返回类型设置为JPEG格式

        Bitmap bitmap = new Bitmap(100,50);//创建一个Image位图对象。
        Graphics g = Graphics.FromImage(bitmap);//从指定的Image位图创建一个Graphics对象

        Random rand = new Random();//创建一个随机数变量
        int code=rand.Next(1000,9999);//利用Next()返回在1000到9999之间的飞非负随机数。
        string strCode = code.ToString();//将随机数转换为string类型。

        HttpContext.Current.Session["Code"] = strCode;//必须实现System.Web.SessionState.IRequestSessionState接口后才能在ashx中读写Session！！！

        g.DrawString(strCode,new Font("黑体",16),Brushes.Silver,new Point(5,15));//绘制位图！<graphicsVar>.DrawString(随机数，字体，随机数颜色，随机数坐标)

//接下来用for循环为验证码位图添加随机直线
        for (int i = 0; i < 10; i++)
        {
            int x1 = rand.Next(bitmap.Width);//<randomVar>.Next(int maxValue)指定随机数最大值
            int y1 = rand.Next(bitmap.Height);
            int x2 = rand.Next(bitmap.Width);
            int y2 = rand.Next(bitmap.Height);

            g.DrawLine(new Pen(Color.Red), x1, y1, x2, y2);
            /*可用类似方式定义下列属性：
             <graphicsVar>.DrawLine() 画随机直线
             <graphicsVar>.SetPixsl() 画随机噪音点
             */
        }
 

        g.DrawRectangle(new Pen(Color.Silver), 1, 1, bitmap.Width - 3, bitmap.Height - 3);//给验证码位图绘画矩形边框    

虚线框中的代码不是必须的，只是对位图的进一步绘画。

        bitmap.Save(context.Response.OutputStream,ImageFormat.Jpeg);//用将位图添加到输出流、


    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

 二、创建一个验证页面，调试！

protected void 提交验证码按钮_Click(object sender, EventArgs e)
    {

      //先从Session中读取正确的验证码，再验证用户输入的值
      string 正确的验证码 = Convert.ToString(Session["Code"]);

      if (TextBox1.Text == 正确的验证码) 
      { 
          Label1.Text = "验证成功"; 
      } 
      else 
      { 
          Label1.Text = "输入的验证码有误"; 
      }

 补充1：

如何实现点击图片刷新验证码？可添加onclick事件重新加载图片源：src=“ ”

<img src="YZM.ashx" onclick="this.src='YZM.ashx?a='+new Date()" />

注：添加onclick="this.src='YZM.ashx'"  图片是不会刷新，需不同的URL地址。

可以添加onclick="this.src='YZM.ashx?a=aaa'"  但图片只会刷新一次。

所以需不同的可动态改变的URL地址。可在后面加上当前时间：+new Data()