ASP.NET Core生成好看的图形验证码

ASP.NET Core生成好看的图形验证码

ASP.NET Core图形验证码

• 引言
• 一、生成随机数
• 二、绘制图片
• • 1、画布
  • 2、画躁线
  • 3、画噪点
  • 4、画验证码
• 三、完整代码示例

引言

ASP.NET Core的验证码呢，稍微有一点曲折，因为默认System.Drawing没有Bitmap对象，也就没法绘制对象，不过通过NuGet：ZKWeb.System.Drawing 可引入Bitmap对象，进行验证码图片的绘制。

一、生成随机数

随机数就比较简单了，给定特定的字符数组，通过Random来生成随机数拼接成对应的字符串，就得到了我们的随验证码的随即字符，这里我简单进行了封装，仅供参考！

        /// <summary>/// 获取数字验证码/// </summary>/// <param name="n">验证码数</param>/// <returns></returns>public static string CreateNumCode(int n){char[] numChar = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };string charCode = string.Empty;Random random = new Random();for (int i = 0; i < n; i++){charCode += numChar[random.Next(numChar.Length)];}return charCode;}/// <summary>/// 获取字符验证码/// </summary>/// <param name="n">验证码数</param>/// <returns></returns>public static string CreateCharCode(int n){char[] strChar = { 'a', 'b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'};string charCode = string.Empty;Random random = new Random();for (int i = 0; i < n; i++){charCode += strChar[random.Next(strChar.Length)];}return charCode;}

二、绘制图片

绘制图片也就是所谓的验证码对于新手就比较陌生了，不过也很好理解，通过简单的梳理下逻辑步骤，就可以清晰明了。即：通过Bitmap来创建画布，Graphis执行画的动作，如：验证码的躁线、噪点、呈现的字符，通过MemoryStream写入内存，通过MemoryStream转换的流数据去获取生成的对应验证码图，再用Session或Cookie存储验证码即可完成！

1、画布

通过Bitmap对象创建画布

            //创建画布Bitmap bitmap = new Bitmap(codeW, codeH);Graphics graphics = Graphics.FromImage(bitmap);graphics.Clear(Color.White);

2、画躁线

躁线可提高验证码的可用性，通过给Graphics画笔Pen指定颜色、位置即可完成！

            //颜色列表Color[] colors = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.DarkBlue };//宽、高，字体大小int codeW = 74;int codeH = 36;int fontSize = 16;Random random = new Random();//画躁线for (int i = 0; i < n; i++){int x1 = random.Next(codeW);int y1 = random.Next(codeH);int x2 = random.Next(codeW);int y2 = random.Next(codeH);Color color = colors[random.Next(colors.Length)];Pen pen = new Pen(color);graphics.DrawLine(pen, x1, y1, x2, y2);}

3、画噪点

噪点和躁线原理一致，不过这里要使用的是Bitmap的SetPixel来完成，很简单也很好理解！

            //画噪点for (int i = 0; i < 100; i++){int x = random.Next(codeW);int y = random.Next(codeH);Color color = colors[random.Next(colors.Length)];bitmap.SetPixel(x, y, color);}

4、画验证码

            //画验证码for (int i = 0; i < n; i++){string fontStr = fonts[random.Next(fonts.Length)];Font font = new Font(fontStr, fontSize);Color color = colors[random.Next(colors.Length)];graphics.DrawString(charCode[i].ToString(), font, new SolidBrush(color), (float)i * 15 + 2, (float)0);}//写入内存流try{MemoryStream stream = new MemoryStream();bitmap.Save(stream, ImageFormat.Jpeg);VerifyCode verifyCode = new VerifyCode(){Code = charCode,Image = stream.ToArray()};return verifyCode;}//释放资源finally{graphics.Dispose();bitmap.Dispose();}

三、完整代码示例

上述是分布讲解图形验证码的生成过程，以及组成结构，这里提供完整的代码，以供大家参考和应用！一共三部分：验证码结构、枚举类型(NUM：数字验证码，CHAR字符验证码)，工具类，并提供Web层调用代码！

public class VerifyCode{/// <summary>/// 验证码/// </summary>public string Code { get; set; }/// <summary>/// 验证码数据流/// </summary>public byte[] Image { get; set; }}

public enum VerifyCodeType{NUM,CHAR}

public static class VerifyCodeHelper{/// <summary>/// 获取验证码/// </summary>/// <param name="n">验证码数</param>/// <param name="type">类型 0：数字 1：字符</param>/// <returns></returns>public static VerifyCode CreateVerifyCode(int n, VerifyCodeType type){//宽、高，字体大小int codeW = 74;int codeH = 36;int fontSize = 16;//初始化验证码string charCode = string.Empty;switch (type.ToString()){case "NUM":charCode = CreateNumCode(n);break;default:charCode = CreateCharCode(n);break;}//颜色列表Color[] colors = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.DarkBlue };//字体列表string[] fonts = { "Times New Roman", "Verdana", "Arial", "Gungsuh" };//创建画布Bitmap bitmap = new Bitmap(codeW, codeH);Graphics graphics = Graphics.FromImage(bitmap);graphics.Clear(Color.White);Random random = new Random();//画躁线for (int i = 0; i < n; i++){int x1 = random.Next(codeW);int y1 = random.Next(codeH);int x2 = random.Next(codeW);int y2 = random.Next(codeH);Color color = colors[random.Next(colors.Length)];Pen pen = new Pen(color);graphics.DrawLine(pen, x1, y1, x2, y2);}          //画噪点for (int i = 0; i < 100; i++){int x = random.Next(codeW);int y = random.Next(codeH);Color color = colors[random.Next(colors.Length)];bitmap.SetPixel(x, y, color);}//画验证码for (int i = 0; i < n; i++){string fontStr = fonts[random.Next(fonts.Length)];Font font = new Font(fontStr, fontSize);Color color = colors[random.Next(colors.Length)];graphics.DrawString(charCode[i].ToString(), font, new SolidBrush(color), (float)i * 15 + 2, (float)0);}//写入内存流try{MemoryStream stream = new MemoryStream();bitmap.Save(stream, ImageFormat.Jpeg);VerifyCode verifyCode = new VerifyCode(){Code = charCode,Image = stream.ToArray()};return verifyCode;}//释放资源finally{graphics.Dispose();bitmap.Dispose();}}/// <summary>/// 获取数字验证码/// </summary>/// <param name="n">验证码数</param>/// <returns></returns>public static string CreateNumCode(int n){char[] numChar = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };string charCode = string.Empty;Random random = new Random();for (int i = 0; i < n; i++){charCode += numChar[random.Next(numChar.Length)];}return charCode;}/// <summary>/// 获取字符验证码/// </summary>/// <param name="n">验证码数</param>/// <returns></returns>public static string CreateCharCode(int n){char[] strChar = { 'a', 'b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'};string charCode = string.Empty;Random random = new Random();for (int i = 0; i < n; i++){charCode += strChar[random.Next(strChar.Length)];}return charCode;}}

public class VerifyCodeController : Controller{public async Task<FileResult> GetVerifyCode(){var oldVerifyCode = HttpContext.Session.GetString("VerifyCode");if (!string.IsNullOrEmpty(oldVerifyCode)){HttpContext.Session.SetString("VerifyCode", "");}return await Task.Factory.StartNew(() =>{VerifyCode verifyCode = VerifyCodeHelper.CreateVerifyCode(4, VerifyCodeType.CHAR);HttpContext.Session.SetString("VerifyCode", verifyCode.Code);return File(verifyCode.Image, @"image/jpeg"); ;});}}

<img src="/VerifyCode/GetVerifyCode" onclick="this.src=this.src+'?'"/>