ASP.NET中怎樣實現圖片驗證碼功能，並且點選圖片會重新整理
阿新 • • 發佈：2019-01-04
------
基本思路：
圖片的src=後臺的一個函式，此函式返回按照一定規則生成的圖片檔案流。
然後此圖片即可生成。
那麼怎樣重新整理驗證碼呢，這是個問題。
因為給圖片的src賦了值之後，想要更換一個圖片，那麼src的那個函式必須再執行一次才行。
<img src="~/AAA/BBB">
怎麼辦呢？
研究證明，可使用隨機數的方法。
基本原理是 <img src="~/AAA/BBB?seed=隨機數">
然後給圖片註冊一個點選事件，點選圖片後就給圖片的src賦值，此時這個函式就會再次執行了。
C#：
3.給img註冊一個onclick事件，如下：
以上程式碼親測可用，VS2013，windows8.1 64位計算機，MVC5環境下。
基本思路：
圖片的src=後臺的一個函式，此函式返回按照一定規則生成的圖片檔案流。
然後此圖片即可生成。
那麼怎樣重新整理驗證碼呢，這是個問題。
因為給圖片的src賦了值之後，想要更換一個圖片，那麼src的那個函式必須再執行一次才行。
<img src="~/AAA/BBB">
怎麼辦呢？
研究證明，可使用隨機數的方法。
基本原理是 <img src="~/AAA/BBB?seed=隨機數">
然後給圖片註冊一個點選事件，點選圖片後就給圖片的src賦值，此時這個函式就會再次執行了。
-------
程式碼如下：
cshtml：
<img src="@Url.Action("CreateCheckCodeImage", "verificationcode")" />
C#：
verificationcode控制器中，函式如下：
/* 生成隨機數的具體內容不是這裡的重點，參考即可。 可直接編譯通過，如不通過，基本是using不全。 生成驗證碼圖片的程式碼是網上搜的，出處已經不知道了。 */ public void CreateCheckCodeImage() { string checkCode = VerficationCodeSrc(); if (checkCode == null || checkCode.Trim() == String.Empty) return; Bitmap image = new Bitmap(_verificationCodeWidth, _verificationCodeHeight); Graphics g = Graphics.FromImage(image); try { //生成隨機生成器 Random random = new Random(); //清空圖片背景色 g.Clear(Color.White); //畫圖片的背景噪音線 for (int i = 0; i < 2; i++) { int x1 = random.Next(image.Width); int x2 = random.Next(image.Width); int y1 = random.Next(image.Height); int y2 = random.Next(image.Height); g.DrawLine(new Pen(Color.Black), x1, y1, x2, y2); } Font font = new Font(_verificationCodeFontFamily, _verificationCodeFontSize, (FontStyle.Bold)); System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),Color.Blue, Color.DarkRed, 1.2f, true); g.DrawString(checkCode, font, brush, 2, 2); //畫圖片的前景噪音點 for (int i = 0; i < 100; i++) { int x = random.Next(image.Width); int y = random.Next(image.Height); image.SetPixel(x, y, Color.FromArgb(random.Next())); } //畫圖片的邊框線 g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); System.IO.MemoryStream ms = new System.IO.MemoryStream(); image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); Response.ClearContent(); Response.ContentType = "image/Gif"; Response.BinaryWrite(ms.ToArray()); } finally { g.Dispose(); image.Dispose(); } }
3.給img註冊一個onclick事件，如下：
javascript：
function vivaChangeVerificationCodeSrc() {
$("#vivaVerificationImg").attr("src", window.baseUrl + "VerificationCode/CreateCheckCodeImage?seed=" + Math.random());
}以上程式碼親測可用，VS2013，windows8.1 64位計算機，MVC5環境下。