實現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()