Implement a verification code generation class (including numbers, pinyin, and Chinese characters)

This article shares with you a verification code generation class that integrates 1: lowercase Pinyin; 2: uppercase Pinyin; 3: numbers; 4: Chinese characters. The examples in this chapter will also include a scenario where mvc uses verification code verification. It has a certain reference value. Let’s take a look at it with the editor.

What I’m sharing with you this time is a verification code generation class that integrates 1: Lowercase Pinyin 2: Uppercase Pinyin 3: Numbers 4: Chinese characters. Judging from the title, it looks very ordinary. Yes, it is very ordinary. However, when generating this verification code class, you can specify the rules of the verification code return format through parameters. More importantly, I hope it can bring some practicality to everyone. The examples in this chapter will also include a scenario where MVC uses verification code for verification. I hope you will like it.

» Verification code generation flow chart

» Analysis of verification code generation pool code

» Verification Draw the code on the picture

» mvc login operation to test the correctness of the verification code

The following will be shared step by step:

» Verification code generation flow chart

First of all, let’s take a look at the generation flow chart of the verification code generation class shared this time:

You can see that the encoding generation pool described in this picture corresponds to several different encoding contents. Here, different encoding contents are allowed to be obtained at the same time according to the parameter settings, so as to reach the verification code that is combined with text, pinyin, and Chinese characters. SpecificallyRule settingsDepends on parameters;

» Analysis of verification code generation pool code

First of all, it can be seen from the analysis of the flow chart above, This verification code generation pool needs to obtain different types of verification code data in parallel to meet the combined verification code, so the following code is available:

/// <summary>
 /// 创建验证码
 /// </summary>
 /// <param name="codeType">1：小写拼音 2：大写拼音 3：数字 4：汉字</param>
 /// <returns></returns>
 public static string CreateCode(string codeType = "1|2|3|4")
 {
 var code = string.Empty;
 try
 {
 if (string.IsNullOrWhiteSpace(codeType) || codeType.IndexOf(&#39;|&#39;) < 0) { codeType = "1|2|3|4"; }
 var codeTypeArr = codeType.Split(new char[] { &#39;|&#39; }, StringSplitOptions.RemoveEmptyEntries);
 var strLen = codeTypeArr.Length;
 //任务
 Task<string>[] taskArr = new Task<string>[strLen];
 for (int i = 0; i < strLen; i++)
 {
  var val = codeTypeArr[i];
  switch (val)
  {
  case "1": //小写拼音
  taskArr[i] = Task.Factory.StartNew<string>(() => { return GetPinYinOrUpper(false); });
  break;
  case "2": //大写拼音
  taskArr[i] = Task.Factory.StartNew<string>(() => { return GetPinYinOrUpper(); });
  break;
  case "3": //数字
  taskArr[i] = Task.Factory.StartNew<string>(() => { return GetShuZi(); });
  break;
  case "4": //汉字
  taskArr[i] = Task.Factory.StartNew<string>(() => { 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;
 }

The keywords continue to be used here Task, to distribute tasks to obtain different verification code contents. Personally, I think the most important thing is to determine the verification code through parameter setting string codeType = "1|2|3|4" The combination method also achieves the diversity of verification code format;

» Draw the verification code on the picture

First of all, what we need to make clear is that If you want to draw text on a picture, you need to use the Graphics keyword to create a canvas and draw our verification code on the picture. Here is the code:

/// <summary>
 /// 生成验证码图片流
 /// </summary>
 /// <param name="code">验证码文字</param>
 /// <returns>流</returns>
 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);
 //画图片的前景干扰点
 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;
 }

This lists the key points of the method of drawing verification code pictures:

1. The height and width of the picture need to be set. This depends on different page layout methods, so here it is Height and width are used as parameters to pass

2. Interference lines: Usually verification code pictures have one or two interference lines, mainly to prevent some malicious users from using image recognition software to make irregular cracking requests. Here are the interference lines The code for setting only a horizontally centered straight line is as follows: g.DrawLine(new Pen(Color.DarkRed), x1, y1, x2, y2);

3. Font: A good-looking font is usually also a kind of user experience, so the font is passed here according to the required parameters;

4. The verification code is located in the vertical and horizontal center of the image. The key code here is:

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

5. g.DrawString(code, font, brush, rf, stringFomart); is mainly used to draw text onto pictures. This is the most critical point

6. We usually turn the verification code into a picture stream instead of actually generating an entity verification code picture and saving it to the server, otherwise the server will soon The disk is insufficient, so the importance of

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

cannot be ignored. The main thing is to save the content of the painting to the stream for easy use

7. Finally Don’t forget to use Dispose to release the canvas

» mvc login operation to test the correctness of the verification code

With the verification code image generated by the verification code generation class above, Then we still need to test and verify the correctness and effect; below we use the mvc architecture for testing, first create a verification code test Action and generate the corresponding ValidCode.cshtml file, and then customize several verification codes in different formats to obtain the Action. The code is as follows:

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

It feels almost exactly the same, except that the corresponding parameters are different. The method followed here is the GetValidateCodeStream parameter codeType format: empty means free combination 1: lowercase pinyin 2: Uppercase Pinyin 3: Numbers 4: Chinese characters; then we fill in the following code in the diagram:

<h2 id="神牛-nbsp-nbsp-验证码实例">神牛 - 验证码实例</h2>
<p class="container " id="appVue">
 <table class="table table-bordered text-left">
 <tbody>
 <tr>
 <td>全部随机</td>
 <td>
  <img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode"  class="lazy"    id="imgCode" / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" >
  <input type="text" name="code" placeholder="请输入验证码" class="form-control" />
  <button class="btn btn-default">登 录</button>
  <span id="msg" style="color:red"></span>
 </td>
 </tr>
 <tr>
 <td>小写|大写|数字|汉字</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode01"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>汉字|数字|大写|小写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode02"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部大写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode03"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部汉字</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode04"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部小写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode05"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 </tbody>
 </table>
</p>

Okay, let’s generate the project, look at the renderings as follows:

能从图中看到我们验证码格式的不同之处，这也是文章开头说的验证码格式的多样性，当然可能还有其他组成格式请允许我暂时忽略，下面我们来做一个点击图片获取新验证码的功能和点击登录按钮去后台程序判断验证码是否匹配的例子，先来修改试图界面代码如下：

@{
 ViewBag.Title = "ValidtCode";
}
<h2 id="神牛-nbsp-nbsp-验证码实例">神牛 - 验证码实例</h2>
<p class="container " id="appVue">
 <table class="table table-bordered text-left">
 <tbody>
 <tr>
 <td>全部随机</td>
 <td>
  <img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode"  class="lazy"    id="imgCode" / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" >
  <input type="text" name="code" placeholder="请输入验证码" class="form-control" />
  <button class="btn btn-default">登 录</button>
  <span id="msg" style="color:red"></span>
 </td>
 </tr>
 <tr>
 <td>小写|大写|数字|汉字</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode01"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>汉字|数字|大写|小写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode02"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部大写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode03"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部汉字</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode04"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 <tr>
 <td>全部小写</td>
 <td><img  src="/static/imghwm/default1.png"  data-src="/home/GetValidateCode05"  class="lazy"    / alt="Implement a verification code generation class (including numbers, pinyin, and Chinese characters)" ></td>
 </tr>
 </tbody>
 </table>
</p>

然后在Controller中增加如下登录验证代码：

public JsonResult UserLogin(string code)
 {
 var data = new Stage.Com.Extend.StageModel.MoData();
 if (string.IsNullOrWhiteSpace(code)) { data.Msg = "验证码不能为空"; return Json(data); }
 var compareCode = Session["code"];
 if (!compareCode.Equals(code)) { data.Msg = "验证码错误"; return Json(data); }
 data.IsOk = true;
 data.Msg = "验证码验证成功";
 return Json(data);
 }
 public FileResult GetValidateCode()
 {
 //返回的验证码文字
 var code = string.Empty;
 var bb_code = ValidateCode.GetValidateCodeStream(ref code);

 var key = "code";
 if (Session[key] != null)
 {
 Session.Remove(key);
 }
 Session[key] = code;
 return File(bb_code, "image/jpeg");
 }

由于我这里无法截动态图，所点击测试获取验证码我这里直接给出线上的一个例子，各位可以试试：http://lovexins.com:1001/home/ValidCode，点击获取新验证码的关键代码是：  $(this).attr("src", src); 重新给img元素的scr赋值，不过这里要注意由于浏览器缓存的原因，这里赋值的时候需要加上一个动态参数，我这里是使用时间作为请求参数，因此有了以下的代码： $(this).attr("src") + "?t=" + nowTime; 这是特别的地方需要注意；好了咋们来直接测试登陆是否能从后端判断验证码是否正确匹配吧，这里用的是session来保存获取验证码图片返回的验证代码，然后在登陆时候判断用户数据的验证码是否和后台session的验证一样：

验证失败：

验证成功：

好了测试用例就这么多，如果您觉得我这个验证码生成例子还可以并且您希望使用那么请注意，参数的传递，不同得到的验证码格式不同，主要方法是：

/// <summary>
 /// 获取验证码图片流
 /// </summary>
 /// <param name="codeLen">验证码个数（codeType设置 > codeLen设置）</param>
 /// <param name="codeType">为空表示自由组合 1：小写拼音 2：大写拼音 3：数字 4：汉字</param>
 /// <returns></returns>
 public static byte[] GetValidateCodeStream(ref string code, string codeType = "", int codeLen = 0, int fontSize = 18, int width = 120, int height = 30)
 {
 //为空自由组合
 if (string.IsNullOrWhiteSpace(codeType))
 {
 for (int i = 0; i < codeLen; i++)
 {
  codeType += rm.Next(1, 5) + "|";
 }
 }
 code = CreateCode(codeType);
 return CreateValidateCodeStream(code, fontSize, width: width, height: height);
 }

具体参数各位可以看下备注，我这里顺便打包下代码，方便分享和使用：验证码生成示例

The above is the detailed content of Implement a verification code generation class (including numbers, pinyin, and Chinese characters). For more information, please follow other related articles on the PHP Chinese website!