這篇文章給大家分享的是有關(guān)HTML中如何實現(xiàn)驗證碼生成類的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

驗證碼生成流程圖

首先，咋們來看一下本次分享的驗證碼生成類的生成流程圖：

能看到此圖描述的編碼生成池對應(yīng)的是幾個不同的編碼內(nèi)容，這里主要根據(jù)參數(shù)設(shè)置允許同時獲取不同編碼內(nèi)容，從而到達(dá)文字，拼音，漢字組合而成驗證碼，具體規(guī)則設(shè)置由參數(shù)而定；

» 驗證碼生成池代碼的解析

首先，由上面流程圖分析的內(nèi)容能看出，這個驗證碼生成池子需要并行獲取不同類型驗證碼數(shù)據(jù)，才能滿足組合的驗證碼，因此有了下面的代碼：

/// 

 /// 創(chuàng)建驗證碼
 /// 
 /// 1：小寫拼音 2：大寫拼音 3：數(shù)字 4：漢字
 /// 
 public static string CreateCode(string codeType = "1|2|3|4")
 {
 var code = string.Empty;
 try
 {
 if (string.IsNullOrWhiteSpace(codeType) || codeType.IndexOf('|') < 0) { codeType = "1|2|3|4"; }
 var codeTypeArr = codeType.Split(new char[] { '|' }, StringSplitOptions.RemoveEmptyEntries);
 var strLen = codeTypeArr.Length;
 //任務(wù)
 Task[] taskArr = new Task[strLen];
 for (int i = 0; i < strLen; i++)
 {
  var val = codeTypeArr[i];
  switch (val)
  {
  case "1": //小寫拼音
  taskArr[i] = Task.Factory.StartNew(() => { return GetPinYinOrUpper(false); });
  break;
  case "2": //大寫拼音
  taskArr[i] = Task.Factory.StartNew(() => { return GetPinYinOrUpper(); });
  break;
  case "3": //數(shù)字
  taskArr[i] = Task.Factory.StartNew(() => { return GetShuZi(); });
  break;
  case "4": //漢字
  taskArr[i] = Task.Factory.StartNew(() => { return GetHanZi(); });
  break;
  default:
  break;
  }
 }
 //等待完成 30s
 Task.WaitAll(taskArr, TimeSpan.FromSeconds(30));
 foreach (var item in taskArr)
 {
  code += item.Result;
 }
 }
 catch (Exception ex)
 {
 code = "我愛祖國";
 }
 return code;
 }

這里繼續(xù)使用了關(guān)鍵字Task，來分發(fā)任務(wù)獲取不同的驗證碼內(nèi)容，個人認(rèn)為最主要的還是通過參數(shù)設(shè)置 string codeType = "1|2|3|4"，來確定驗證碼的組合方式，這樣也達(dá)到了驗證碼格式的多樣性；

 把驗證代碼畫到圖片上

首先，咋們要明確的是要吧文字畫在某個圖片上，那么需要用到Graphics關(guān)鍵字，以此來創(chuàng)建畫布把咋們的驗證編碼畫到圖片上，這里先上代碼：

/// 

 /// 生成驗證碼圖片流
 /// 
 /// 驗證碼文字
 /// 流
 public static byte[] CreateValidateCodeStream(string code = "我愛祖國", int fontSize = 18, int width = 0, int height = 0, string fontFamily = "華文楷體")
 {
 var bb = new byte[0];
 //初始化畫布
 var padding = 2;
 var len = code.Length;
 width = width <= 0 ? fontSize * 2 * (len - 1) + padding * 4 : width;
 height = height <= 0 ? fontSize * 2 : height;
 var image = new Bitmap(width, height);
 var g = Graphics.FromImage(image);
 try
 {
 var random = new Random();
 //清空背景色
 g.Clear(Color.White);
 //畫橫向中間干擾線
 var x1 = 0;
 var y1 = height / 2;
 var x2 = width;
 var y2 = y1;
 g.DrawLine(new Pen(Color.DarkRed), x1, y1, x2, y2);
 //字體
 var font = new Font(fontFamily, fontSize, (FontStyle.Bold | FontStyle.Italic));
 var brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),
  Color.Blue, Color.DarkRed, 1f, true);
 //畫文字
 var stringFomart = new StringFormat();
 //垂直居中
 stringFomart.LineAlignment = StringAlignment.Center;
 //水平居中
 stringFomart.Alignment = StringAlignment.Center;
 var rf = new Rectangle(Point.Empty, new Size(width, height));
 g.DrawString(code, font, brush, rf, stringFomart);
 //畫圖片的前景干擾點(diǎn)
 for (int i = 0; i < 100; i++)
 {
  var x = random.Next(image.Width);
  var 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);
 //保存圖片流
 var stream = new MemoryStream();
 image.Save(stream, ImageFormat.Jpeg);
 //輸出圖片流
 bb = stream.ToArray();
 }
 catch (Exception ex) { }
 finally
 {
 g.Dispose();
 image.Dispose();
 }
 return bb;
 }

這個列出畫驗證碼圖片方法的關(guān)鍵點(diǎn)：

1. 圖片的高和寬度需要設(shè)置，這個根據(jù)不同頁面布局方式而定，所以這里吧高和寬用作參數(shù)傳遞

2. 干擾線：通常驗證碼圖片都以一兩條干擾線，主要防止某些惡意用戶使用圖片識別軟件進(jìn)行不正規(guī)破解請求，我這里干擾線只設(shè)置了橫向居中的一天直線代碼如： g.DrawLine(new Pen(Color.DarkRed), x1, y1, x2, y2);

3. 字體：一個好看的字體通常也一種用戶體驗，因此這里根據(jù)需要參數(shù)傳遞字體；

4. 驗證代碼位于圖片縱橫向居中，這里的關(guān)鍵代碼是：

 var stringFomart = new StringFormat();
 //垂直居中
 stringFomart.LineAlignment = StringAlignment.Center;
 //水平居中
 stringFomart.Alignment = StringAlignment.Center;

5.  g.DrawString(code, font, brush, rf, stringFomart);主要用來把文字畫到圖片上，這是最關(guān)鍵的地方

6. 咋們通常都是吧驗證碼弄成圖片流，而不是真的生成一個實體的驗證碼圖片保存到服務(wù)器上，不然這樣服務(wù)器很快就會磁盤不足，所以

 //保存圖片流
 var stream = new MemoryStream();
 image.Save(stream, ImageFormat.Jpeg);
 //輸出圖片流
 bb = stream.ToArray();

這句的重要性也不可忽視，主要就把畫的內(nèi)容保存到流中方便使用

7. 最后千萬不用忘了使用Dispose釋放畫布

» mvc登錄操作測試驗證碼正確性

有了上面驗證碼生成類生成好的驗證碼圖片，那么我們還需要測試驗證下正確性和效果；下面我們使用mvc架構(gòu)來做測試，先創(chuàng)建一個驗證碼測試Action并生成對應(yīng)試圖ValidCode.cshtml文件，然后自定義幾個不同格式的驗證碼獲取Action，代碼如下：

public FileResult GetValidateCode()
 {
 //返回的驗證碼文字
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code);

 return File(bb_code, "image/jpeg");
 }
 public FileResult GetValidateCode01()
 {
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code, "1|2|3|4");
 return File(bb_code, "image/jpeg");
 }
 public FileResult GetValidateCode02()
 {
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code, "4|3|2|1");
 return File(bb_code, "image/jpeg");
 }
 public FileResult GetValidateCode03()
 {
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code, "2|2|2|2");
 return File(bb_code, "image/jpeg");
 }
 public FileResult GetValidateCode04()
 {
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code, "4|4|4|4");
 return File(bb_code, "image/jpeg");
 }
 public FileResult GetValidateCode05()
 {
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code, "1|1|1|1");
 return File(bb_code, "image/jpeg");
 }

感覺上幾乎一模一樣，只是對應(yīng)的參數(shù)不一樣，這里遵循的方法GetValidateCodeStream參數(shù)codeType格式是：為空表示自由組合  1：小寫拼音 2：大寫拼音 3：數(shù)字 4：漢字；然后我們往試圖中填寫如下代碼：

神牛 - 驗證碼實例

 
 
 
 全部隨機(jī)
 
  
  
  登 錄
  
 
 
 
 小寫|大寫|數(shù)字|漢字
 
 
 
 漢字|數(shù)字|大寫|小寫
 
 
 
 全部大寫
 
 
 
 全部漢字
 
 
 
 全部小寫