asp.net點選驗證碼實作思路-C#.Net教程-PHP中文網

首頁

後端開發

C#.Net教程

asp.net點選驗證碼實作思路

高洛峰

Jan 13, 2017 pm 01:54 PM

哈哈好久沒冒泡了，最進看見點選驗證碼有點意思，所以想自己寫一個。

先上效果圖

asp.net點選驗證碼實作思路

如果你被這個效果吸引了就請繼續看下去。

貼程式碼前先說點思路：

1.要有一個漢字庫,並按字形分類。（我在資料庫裡是安部首分類的）

2.取得驗證碼（也就是取幾個文字做驗證碼）

3.根據取出來的文字去找形近字

4.排列驗證碼文字和形近字

5.繪製圖片

6.顯示

一、獲取字庫

我國文化博大精深，哪來當然我不可能手動加進去，於是我就在網路上隨便找了一個能查漢字的網站，去抓別人的資料。抓資料的方法請點傳送門。傳送門裡說的只是思路，如果有不懂的請艾特我。我會在下面分享我的字庫。

二、取得驗證碼

這個就比較簡單了這裡我就直接貼程式碼了，下面的程式碼就是隨機排序後取4條數據，我這樣寫是為了圖方便。個人覺得先隨機產生ID，然後直接根據ID取數據，這樣查詢速度會比下面這種寫法快。（注意我用的資料庫是MySql）

/// <summary>
/// 获取验证码
/// </summary>
public List<VerificationCode.Model.WenZhi> GetCodeText()
{
 const string sql = "SELECT * FROM wenzhi ORDER BY RAND() LIMIT 4";
 var dataReader = dbHelper.GetDataReader(sql);
 var list = DataReaderToList(dataReader);
 dataReader.Close();
 return list;
}

三、根據取出來的文字去找形近字

因為第一步的時候我存部首了，所以這裡我直接根據部首取獲取當前部首的形近字。

/// <summary>
/// 获取答案备选
/// </summary>
/// <param name="buShouCode">部首编码</param>
/// <param name="id">当前文字ID</param>
/// <param name="number">数量</param>
/// <returns></returns>
public List<VerificationCode.Model.WenZhi> GetAnswer(string buShouCode, int id,int number=1)
{
 string sql = $"SELECT * FROM wenzhi where BuShouCode=&#39;{buShouCode}&#39; and ID <> {id} ORDER BY RAND() LIMIT "+ number;
 var dataReader = dbHelper.GetDataReader(sql);
 var list = DataReaderToList(dataReader);
 dataReader.Close();
 return list;
}

四.排列驗證碼文字和形近字

下面的程式碼是先把備選答案和驗證碼放在一個集合裡然後再對集合排序

public Model.Code GetCode()
 {
   
  var wenzlist = _wenZhiDal.GetCodeText(); //获取验证码
  var listAnsuwr = new List<Answer>();//实例化备选答案对象
  var answerCode = string.Empty;//答案
  var result = new Model.Code
  {
   Id = Guid.NewGuid().ToString()
  };
  //根据验证码获取备选答案并把添加到答案添加到备选答案集合
  foreach (var item in wenzlist)
  {
   answerCode += item.ID + ",";
   result.AnswerValue += item.Text;
   var answerList = _wenZhiDal.GetAnswer(item.BuShouCode, item.ID);
   listAnsuwr.Add(new Answer { Id = item.ID.ToString(), Img = GetImage(item.Text) });
   listAnsuwr.AddRange(answerList.Select(answer => new Answer { Id = answer.ID.ToString(), Img = GetImage(answer.Text) }));
  }
  //如果答案个数不够就再去取几个
  if (listAnsuwr.Count < 9)
  {
   var ran = new Random();
   var randKey = ran.Next(0, 4);
   var item = wenzlist[randKey];
   var answerList = _wenZhiDal.GetAnswer(item.BuShouCode, item.ID, 9 - listAnsuwr.Count);
   listAnsuwr.AddRange(answerList.Select(answer => new Answer { Id = answer.ID.ToString(), Img = GetImage(answer.Text) }));
  }
  result.CodeImg = GetImage(result.AnswerValue);//获取图片
  result.AnswerValue = answerCode.TrimEnd(&#39;,&#39;);
  result.Answer = RandomSortList(listAnsuwr);//打乱正确答案与形近字的顺序
  return result;
 }

這是對集合排序的代碼

/// <summary>
/// 随机排列集合
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="listT"></param>
/// <returns></returns>
private static List<T> RandomSortList<T>(IEnumerable<T> listT)
{
 var random = new Random();
 var newList = new List<T>();
 foreach (var item in listT)
 {
  newList.Insert(random.Next(newList.Count + 1), item);
 }
 return newList;
}

private static string GetImage(string text)
  {
   Image image;
   switch (text.Length)
   {
    case 1:
     image = new Bitmap(50, 40);
     break;
    case 4:
     image = new Bitmap(120, 40);
     break;
    default:
     image = new Bitmap(50, 40);
     break;
   }
   Brush brushText = new SolidBrush(Color.FromArgb(255, 0, 0, 0));
   var graphics = Graphics.FromImage(image);
   graphics.SmoothingMode = SmoothingMode.AntiAlias;
   graphics.Clear(Color.White);
   var font = new Font(new FontFamily("华文彩云"), 20, FontStyle.Regular);
   if (text.Length > 1)//画验证码
   {
    //先来两条直线做干扰 然后再画文字
    graphics.DrawLine(new Pen(brushText, new Random().Next(1, 3)), new Point(new Random().Next(0, 10), new Random().Next(10, 40)), new Point(new Random().Next(100, 120), new Random().Next(10, 30)));
    graphics.DrawLine(new Pen(brushText, new Random().Next(1, 3)), new Point(new Random().Next(20, 50), new Random().Next(0, 10)), new Point(new Random().Next(100, 120), new Random().Next(30, 40)));
    graphics.DrawString(text, font, brushText, 0, 10);
 
   }
   else//画备选答案
   {
    Point middle = new Point(25, 20);
    graphics.TranslateTransform(middle.X, middle.Y);
    //这里是360°随机旋转 
    graphics.RotateTransform(new Random().Next(0, 360));
    var format = new StringFormat(StringFormatFlags.NoClip)
    {
     Alignment = StringAlignment.Center,
     LineAlignment = StringAlignment.Center
    };
    graphics.DrawString(text, font, brushText, 0, 0, format);
 
   }
   brushText.Dispose();
   graphics.Dispose();
   return ImageToBase64(image);
  }

這是對集合排序的代碼

public string GetVerCode()
{
 var code = new VerificationCode.Code().GetCode();
 Session["VERCODE"] = code.AnswerValue;
 code.AnswerValue = "";
 return JsonConvert.SerializeObject(code);
}

<div class="form-group">
     <ul class="vercode">
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net點選驗證碼實作思路" ></li>
      <li class="delete" onclick="delete_input()"></li>
     </ul>
     <div>
      <img  id="code-image"/ alt="asp.net點選驗證碼實作思路" > <a href="javascript:void(0);" onclick="load_vercode()">看不清？</a>
     </div>
     <ul class="vercode-anwser">
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
      <li><img  / alt="asp.net點選驗證碼實作思路" ></li>
     </ul>
    </div>

這是對集合排序的代碼

<script>
  $(function () {
   //加载验证码
   load_vercode();
   //绑定验证码点击事件
   $(".vercode-anwser").find("img").on("click", null, function () {
    $(".vercode").find("img[src=&#39;&#39;]:eq(0)").attr("src", $(this).attr("src"));
   });
  });
 
  function load_vercode() {
   $(".vercode").find("img").attr("src", "");
   $.get("GetVerCode", function (data) {
    var result = JSON.parse(data);
    $("#code-image").attr("src", "data:image/png;base64," + result.CodeImg);
    $(".vercode-anwser").find("img").each(function (index) {
     $(this).attr("src", "data:image/png;base64," + result.Answer[index].Img);
    });
   });
  }
  //删除事件
  function delete_input() {
   $(".vercode").find("img[src!=&#39;&#39;]:last").attr("src", "");
  }
 </script>

rrreee

這是對集合排序的代碼

rrreee
rrreee

這是對集合排序的代碼

rrreee五、繪製圖片

下面是畫圖的程式碼，驗證碼和備選答案對應兩種不同的畫法（裡面註解寫的還算清楚）。不要擔心文字旋轉x°後人類分不出來，哈哈。程式碼最後一句我把圖片轉成了Base64，方便前端呼叫。

rrreee

六、顯示

直接呼叫GetCode方法就能返回驗證碼物件

下面是後台程式碼,應為正確答案是放在AnswerValue裡的所以我先把裡面取出來放Session清空後再透過json返回給瀏覽器。 🎜rrreee🎜現在來堆點html代碼🎜rrreee🎜再來點js代碼,這裡只實現的圖片上的效果，還沒對數據驗證（這裡說說驗證思路：每個圖片對應一個ID，取到選擇圖片的ID用逗號分隔，然後與Session裡的值對比）🎜rrreee🎜到這裡代碼就差不多了,以上思路只是單純的個人想法，有興趣的朋友一起來討論吧。 🎜🎜以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。 🎜🎜更多asp.net點選驗證碼實現想法相關文章請關注PHP中文網！ 🎜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

char數組在C語言中如何使用Apr 03, 2025 pm 03:24 PM

char 數組在 C 語言中存儲字符序列，聲明為 char array_name[size]。訪問元素通過下標運算符，元素以空終止符 '\0' 結尾，用於表示字符串終點。 C 語言提供多種字符串操作函數，如 strlen()、strcpy()、strcat() 和 strcmp()。

C語言各種符號的使用方法Apr 03, 2025 pm 04:48 PM

C 語言中符號的使用方法涵蓋算術、賦值、條件、邏輯、位運算符等。算術運算符用於基本數學運算，賦值運算符用於賦值和加減乘除賦值，條件運算符用於根據條件執行不同操作，邏輯運算符用於邏輯操作，位運算符用於位級操作，特殊常量用於表示空指針、文件結束標記和非數字值。

char在C語言字符串中的作用是什麼Apr 03, 2025 pm 03:15 PM

在 C 語言中，char 類型在字符串中用於：1. 存儲單個字符；2. 使用數組表示字符串並以 null 終止符結束；3. 通過字符串操作函數進行操作；4. 從鍵盤讀取或輸出字符串。

char在C語言中如何處理特殊字符Apr 03, 2025 pm 03:18 PM

C語言中通過轉義序列處理特殊字符，如：\n表示換行符。 \t表示製表符。使用轉義序列或字符常量表示特殊字符，如char c = '\n'。注意，反斜杠需要轉義兩次。不同平台和編譯器可能有不同的轉義序列，請查閱文檔。

c#多線程和異步的區別Apr 03, 2025 pm 02:57 PM

多線程和異步的區別在於，多線程同時執行多個線程，而異步在不阻塞當前線程的情況下執行操作。多線程用於計算密集型任務，而異步用於用戶交互操作。多線程的優勢是提高計算性能，異步的優勢是不阻塞 UI 線程。選擇多線程還是異步取決於任務性質：計算密集型任務使用多線程，與外部資源交互且需要保持 UI 響應的任務使用異步。

char在C語言中如何進行類型轉換Apr 03, 2025 pm 03:21 PM

在 C 語言中，char 類型轉換可以通過：強制類型轉換：使用強制類型轉換符將一種類型的數據直接轉換為另一種類型。自動類型轉換：當一種類型的數據可以容納另一種類型的值時，編譯器自動進行轉換。

C語言 sum 的作用是什麼？Apr 03, 2025 pm 02:21 PM

C語言中沒有內置求和函數，需自行編寫。可通過遍歷數組並累加元素實現求和：循環版本：使用for循環和數組長度計算求和。指針版本：使用指針指向數組元素，通過自增指針遍歷高效求和。動態分配數組版本：動態分配數組並自行管理內存，確保釋放已分配內存以防止內存洩漏。

char與wchar_t在C語言中的區別Apr 03, 2025 pm 03:09 PM

在 C 語言中，char 和 wchar_t 的主要區別在於字符編碼：char 使用 ASCII 或擴展 ASCII，wchar_t 使用 Unicode；char 佔用 1-2 個字節，wchar_t 佔用 2-4 個字節；char 適用於英語文本，wchar_t 適用於多語言文本；char 廣泛支持，wchar_t 依賴於編譯器和操作系統是否支持 Unicode；char 的字符範圍受限，wchar_t 的字符範圍更大，並使用專門的函數進行算術運算。

See all articles