asp.net cliquez sur les idées de mise en œuvre du code de vérification

Haha, ça fait longtemps que ça n'a pas été posté. Finalement, j'ai vu que cliquer sur le code de vérification était intéressant, alors j'ai eu envie d'en écrire un moi-même.

D'abord les rendus

Si vous êtes attiré par cet effet, continuez à lire.

Laissez-moi vous donner quelques idées avant de poster le code :

1 Il doit y avoir une bibliothèque de caractères chinois et la classer selon les glyphes. (J'ai classé les radicaux dans la base de données)

2. Obtenez le code de vérification (c'est-à-dire prenez quelques mots pour créer le code de vérification)

3. en fonction de Trouvez les mots avec des formes similaires

4. Organisez le texte du code de vérification et les mots avec des formes similaires

5. Dessinez des images

6. Afficher

1. Obtenir la bibliothèque de personnages

La culture de notre pays est profonde et profonde, d'où viennent tant de personnages épicés ? Bien sûr, je ne pouvais pas l'ajouter manuellement, j'ai donc trouvé par hasard un site Web capable de rechercher des caractères chinois sur Internet pour capturer les données d'autres personnes. Pour capturer des données, veuillez cliquer sur le portail. Ce qui est mentionné dans le portail n’est que des idées. S’il y a quelque chose que vous ne comprenez pas, dites-le-moi. Je partagerai ma bibliothèque de polices ci-dessous.

2. Obtenez le code de vérification

C'est relativement simple, je vais coller le code directement ici Le code suivant consiste à trier et prendre 4 données au hasard. . Je suis comme ça Écrit pour plus de commodité. Personnellement, je pense que générer d'abord l'ID de manière aléatoire, puis récupérer les données directement en fonction de l'ID, rendra la requête plus rapide que la méthode d'écriture suivante. (Notez que la base de données que j'utilise est 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;
}

3. Trouvez des mots similaires en fonction du texte extrait

Parce que j'ai enregistré les radicaux dans la première étape, alors ici J'obtiens directement la parole proche du radical actuel à partir du radical.

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

4. Organisez le texte du code de vérification et les mots similaires

Le code suivant place d'abord les réponses alternatives et les codes de vérification dans un ensemble, puis trie l'ensemble

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

C'est le code pour trier la collection

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

5. Dessinez l'image

Ce qui suit est le code pour dessiner l'image, le code de vérification correspond à la réponse alternative Deux méthodes de peinture différentes (les commentaires à l'intérieur sont assez clairs). Ne vous inquiétez pas, les humains ne peuvent pas faire la différence après une rotation du texte de x°, haha. Dans la dernière phrase du code, j'ai converti l'image en Base64 pour faciliter les appels front-end.

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

6. Affichage

L'appel direct de la méthode GetCode peut renvoyer l'objet code de vérification

Ce qui suit est le code d'arrière-plan, qui devrait être la bonne réponse est qu'elle est placée dans AnswerValue, donc je la retire d'abord et la mets en session, puis j'efface la valeur et la renvoie au navigateur via json.

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

Maintenant, empilons du code html

<div class="form-group">
     <ul class="vercode">
      <li><img  src=&#39;&#39;/ alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  src=&#39;&#39;/ alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li class="delete" onclick="delete_input()"></li>
     </ul>
     <div>
      <img  id="code-image"/ alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" > <a href="javascript:void(0);" onclick="load_vercode()">看不清？</a>
     </div>
     <ul class="vercode-anwser">
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
      <li><img  / alt="asp.net cliquez sur les idées de mise en œuvre du code de vérification" ></li>
     </ul>
    </div>

Ajoutons du code js Ici, nous ne réalisons que l'effet sur l'image, et nous n'avons pas encore vérifié les données. (voici l'idée de vérification : Chaque image correspond à un identifiant. Récupérez les identifiants des images sélectionnées séparés par des virgules, puis comparez-les avec les valeurs de la Session)

<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>

Le code est presque la même chose à ce stade. Les idées ci-dessus ne sont que mes pensées personnelles. Discutons-en avec des amis intéressés.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés aux idées d'implémentation du code de vérification des clics asp.net, veuillez faire attention au site Web PHP chinois !