1、用VS2019建立一个web应用程序,选mvc模板
2、选中项目邮件新建文件夹Webservice,然后添加一般处理程序Verify.ashx然后右键打开改写如下
1 public class VerifyCode : IHttpHandler, IRequiresSessionState 2 { 3 4 public bool IsReusable { get { return false; } } 5 private const int width = 90; 6 private const int height = 30; 7 public void ProcessRequest(HttpContext context) 8 { 9 context.Response.Cache.SetCacheability(HttpCacheability.NoCache); 10 context.Response.ClearContent(); 11 context.Response.ContentType = "image/Png"; 12 context.Response.BinaryWrite(CreateImg(ExfSoft.Common.SecurityUtil.CreateNew(4, true))); 13 context.Response.End(); 14 } 15 16 private byte[] CreateImg(string VerifyCode) 17 { 18 //这个宽高可以根据需要确定 19 System.Drawing.Bitmap image = new Bitmap(width, height); 20 //创建图形 21 Graphics g = Graphics.FromImage(image); 22 //创建RectangleF结构指定一个区域 23 RectangleF rectangle = new RectangleF(0, 0, image.Width, image.Height); 24 g.FillRectangle(new SolidBrush(Color.FromArgb(255, 255, 255)), rectangle); 25 26 //背景噪音线 27 System.Random random = new Random(); 28 for (int i = 0; i < 15; i++) 29 { 30 int x1 = random.Next(width); 31 int x2 = random.Next(width); 32 int y1 = random.Next(height); 33 int y2 = random.Next(height); 34 g.DrawLine(new Pen(Color.FromArgb(random.Next())), x1, y1, x2, y2); 35 } 36 Font font = new Font("Arial", 14, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); 37 LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, width, height), Color.Blue, Color.DarkRed, 1.2f, true); 38 39 var chars = new List<Char>(); 40 foreach (char s in VerifyCode) 41 { 42 chars.Add(s); 43 } 44 45 g.DrawString(String.Join(" ", chars.ToArray()), font, brush, 10, 5); 46 47 //画图片的前景噪音点 48 for (int i = 0; i < 50; i++) 49 { 50 int x = random.Next(width); 51 int y = random.Next(height); 52 image.SetPixel(x, y, Color.FromArgb(random.Next())); 53 } 54 //画图片的边框线 55 g.DrawRectangle(new Pen(Color.FromArgb(255, 153, 193, 226)), 0, 0, image.Width - 1, image.Height - 1); 56 57 MemoryStream ms = new MemoryStream(); 58 //选择透明格式 59 image.Save(ms, System.Drawing.Imaging.ImageFormat.Png); 60 //原本是准备输出html流,现在输出图信数据,所以要修改http头 61 return ms.ToArray(); 62 } 63 }
3、任意找一个页面如Index.cshtml,添加图片控件和Jquery代码
<img id="verifycode_img" src="/webservice/verifycode.ashx" onclick="" style="vertical-align: middle; margin-left: 10px;" />
<script> $(function () { $("#verifycode_img").click(function () { $(this).attr(‘src‘, ‘/WebService/VerifyCode.ashx?t=‘ + new Date()) }) }) </script>
4、效果,点击图片验证码将会做相应变化
5、配合input框提交到后台Action里面通过,ExfSoft.Common.SecurityUtil.IsValid("验证码字符串")方法,即可以实现登录验证码功能。