ASP.NET 實現驗證碼以及刷新驗證碼

時間 2019-12-20

原文原文鏈接

實現代碼javascript

  1 /// <summary>
  2     /// 生成驗證碼圖片，保存session名稱VerificationCode
  3     /// </summary>
  4     public static void CreateVerificationCode()
  5     {
  6         int number;
  7         string checkCode = string.Empty;
  8 
  9         //隨機數種子
 10         Random randoms = new Random();
 11 
 12         for (int i = 0; i < 4; i++) //校驗碼長度爲4
 13         {
 14             //隨機的整數
 15             number = randoms.Next();
 16 
 17             //字符從0-9,A-Z中隨機產生,對應的ASCII碼分別爲
 18             //48-57,65-90
 19             number = number % 36;
 20             if (number < 10)
 21             {
 22                 number += 48;
 23             }
 24             else
 25             {
 26                 number += 55;
 27             }
 28             checkCode += ((char)number).ToString();
 29         }
 30 
 31         //在session中保存校驗碼
 32         System.Web.HttpContext.Current.Session["VerificationCode"] = checkCode;
 33 
 34         //若校驗碼爲空，則直接返回
 35         if (checkCode == null || checkCode.Trim() == String.Empty)
 36         {
 37             return;
 38         }
 39         //根據校驗碼的長度肯定輸出圖片的長度
 40         System.Drawing.Bitmap image = new System.Drawing.Bitmap(55, 20);//(int)Math.Ceiling(Convert.ToDouble(checkCode.Length * 15))
 41         //建立Graphics對象
 42         Graphics g = Graphics.FromImage(image);
 43         try
 44         {
 45             //生成隨機數種子
 46             Random random = new Random();
 47             //清空圖片背景色
 48             g.Clear(Color.White);
 49             //畫圖片的背景噪音線 10條
 50             //---------------------------------------------------
 51             for (int i = 0; i < 10; i++)
 52             {
 53                 //噪音線起點座標(x1,y1),終點座標(x2,y2)
 54                 int x1 = random.Next(image.Width);
 55                 int x2 = random.Next(image.Width);
 56                 int y1 = random.Next(image.Height);
 57                 int y2 = random.Next(image.Height);
 58 
 59                 //用銀色畫出噪音線
 60                 g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
 61             }
 62             //---------------------------------------------------
 63             //Brush b = Brushes.Silver;
 64             //g.FillRectangle(b, 0, 0, image.Width, image.Height);
 65             //---------------------以上兩種任選其一------------------------------
 66             //輸出圖片中校驗碼的字體: 12號Arial,粗斜體
 67             Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));
 68 
 69             //線性漸變畫刷
 70             LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.Purple, 1.2f, true);
 71             g.DrawString(checkCode, font, brush, 2, 2);
 72 
 73             //畫圖片的前景噪音點 50個
 74             for (int i = 0; i < 50; i++)
 75             {
 76                 int x = random.Next(image.Width);
 77                 int y = random.Next(image.Height);
 78                 image.SetPixel(x, y, Color.FromArgb(random.Next()));
 79             }
 80 
 81             //畫圖片的邊框線
 82             g.DrawRectangle(new Pen(Color.Peru), 0, 0, image.Width - 1, image.Height - 1);
 83 
 84             //建立內存流用於輸出圖片
 85             using (MemoryStream ms = new MemoryStream())
 86             {
 87                 //圖片格式指定爲png
 88                 image.Save(ms, ImageFormat.Jpeg);
 89                 //清除緩衝區流中的全部輸出
 90                 System.Web.HttpContext.Current.Response.ClearContent();
 91                 //輸出流的HTTP MIME類型設置爲"image/Png"
 92                 System.Web.HttpContext.Current.Response.ContentType = "image/Jpeg";
 93                 //輸出圖片的二進制流
 94                 System.Web.HttpContext.Current.Response.BinaryWrite(ms.ToArray());
 95             }
 96         }
 97         finally
 98         {
 99             //釋放Bitmap對象和Graphics對象
100             g.Dispose();
101             image.Dispose();
102         }
103     }

Create Verification Code

建立一個aspx頁面java

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AuthCode.aspx.cs" Inherits="AuthCode" %>
2 
3 <%Help.CreateVerificationCode(); %>

Create WebFrom

添加HTML代碼,引用session

1 <div class="positionR">
2     <label>驗證碼：</label>
3     <span class="style1"> *</span>
4     <input type="text" class="yanZm" runat="Server" reg="^.+$" id="txtAuthCode" tip="請輸入驗證碼!" />
5     <img class="yanZm_img" src="AuthCode.aspx" alt="" id="imgAuthCode" />
6 </div>

HTML Code

如何實現刷新?dom

1     <script type="text/javascript">
2         $("#imgAuthCode").click(function () {
3             $(this).attr("src", "AuthCode.aspx?code=" + (new Date()).getTime());
4         });
5     </script>

Refresh - JS Code