asp.net点选验证码实现思路分享 (附demo)

哈哈好久没冒泡了，最进看见点选验证码有点意思，所以想自己写一个。

先上效果图

如果你被这个效果吸引了就请继续看下去。

贴代码前先说点思路：

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='{buShouCode}' 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(',');
   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;
  } 

五、绘制图片

下面是画图的代码，验证码和备选答案对应两种不同的画法（里面注释写的还算清楚）。不要担心文字旋转x°后人类分不出来，哈哈。代码最后一句我把图片转成了Base64，方便前端调用。

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);
  } 

六、显示

直接调用GetCode方法就能返回验证码对象

下面是后台代码,应为正确答案是放在AnswerValue里的所以我先把取出来放Session里面，然后把值清空后再通过json返回给浏览器。

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

现在来堆点html代码

<div class="form-group">
     <ul class="vercode">
      <li><img src=''/></li>
      <li><img src=''/></li>
      <li><img src=''/></li>
      <li><img src=''/></li>
      <li class="delete" onclick="delete_input()"></li>
     </ul>
     <div>
      <img id="code-image"/> <a href="javascript:void(0);" onclick="load_vercode()">看不清？</a>
     </div>
     <ul class="vercode-anwser">
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
      <li><img /></li>
     </ul>
    </div> 

再来点js代码,这里只实现的图片上的效果，还没对数据验证（这里说说验证思路：每个图片对应一个ID，取到选择图片的ID用逗号分隔，然后与Session里的值对比）

<script>
  $(function () {
   //加载验证码
   load_vercode();
   //绑定验证码点击事件
   $(".vercode-anwser").find("img").on("click", null, function () {
    $(".vercode").find("img[src='']: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!='']:last").attr("src", "");
  }
 </script> 

到这里代码就差不多了,以上思路只是单纯的个人想法，有兴趣的朋友一起来讨论吧。

源代码在这里-->地址 http://xiazai./201701/yuanma/VerificationCode_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# asp.net验证码  # .net点选验证码  # .net文字验证码  # Asp.net Web Api实现图片点击式图片验证码功能  # ASP.NET中画图形验证码的实现代码  # Asp.net开发之webform图片水印和图片验证码的实现方法  # asp.net登录验证码实现方法  # asp.net之生成验证码的方法集锦（一）  # 如何使用ASP.NET制作简单的验证码  # asp.net验证码图片生成示例  # ASP.NET 实现验证码以及刷新验证码的小例子  # Asp.net实现手写验证码的操作代码  # 验证码  # 几个  # 我就  # 放在  # 去找  # 先把  # 这是  # 传送门  # 如果你  # 在这里  # 我在  # 我不  # 还没  # 我会  # 就能  # 一句  # 要有  # 两种  # 我把  # 不明白 

相关文章： Swift中switch语句区间和元组模式匹配  网站制作知乎推荐,想做自己的网站用什么工具比较好？  如何在新浪SAE免费搭建个人博客？  如何基于云服务器快速搭建个人网站？  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  微课制作网站有哪些,微课网怎么进？  如何快速生成可下载的建站源码工具？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  网站企业制作流程,用什么语言做企业网站比较好？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  如何用虚拟主机快速搭建网站？详细步骤解析  如何快速建站并高效导出源代码？  Python路径拼接规范_跨平台处理说明【指导】  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  如何有效防御Web建站篡改攻击？  ,石家庄四十八中学官网？  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  建站之星安装后如何配置SEO及设计样式？  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  香港服务器如何优化才能显著提升网站加载速度？  济南专业网站制作公司,济南信息工程学校怎么样？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  如何高效配置IIS服务器搭建网站？  建站之星代理平台如何选择最佳方案？  建站之星价格显示格式升级，你的预算足够吗？  如何快速搭建自助建站会员专属系统？  制作门户网站的参考文献在哪,小说网站怎么建立？  如何获取PHP WAP自助建站系统源码？  ,交易猫的商品怎么发布到网站上去？  长沙做网站要多少钱,长沙国安网络怎么样？  如何做静态网页,sublimetext3.0制作静态网页？  在线教育网站制作平台,山西立德教育官网？  如何选择服务器才能高效搭建专属网站？  如何选择CMS系统实现快速建站与SEO优化？  建站之星多图banner生成与模板自定义指南  建站中国官网：模板定制+SEO优化+建站流程一站式指南  如何制作一个表白网站视频,关于勇敢表白的小标题？  建站之星免费模板：自助建站系统与智能响应式一键生成  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些？  如何构建满足综合性能需求的优质建站方案？  建站之星各版本价格是多少？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  如何确保FTP站点访问权限与数据传输安全？