网站验证码制作与调用
后台 一般处理程序生成验证码:
1 public void ProcessRequest(HttpContext context) 2 { 3 int codeW = 80; 4 int codeH = 22; 5 int fontSize = 16; 6 string chkCode = string.Empty; 7 //颜色列表,用于验证码、噪线、噪点 8 Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue }; 9 //字体列表,用于验证码 10 string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" }; 11 //验证码的字符集,去掉了一些容易混淆的字符 12 char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' }; 13 Random rnd = new Random(); 14 //生成验证码字符串 15 for (int i = 0; i < 4; i++) 16 { 17 chkCode += character[rnd.Next(character.Length)]; 18 } 19 //写入Session 20 context.Session["Code"] = chkCode; 21 //创建画布 22 Bitmap bmp = new Bitmap(codeW, codeH); 23 Graphics g = Graphics.FromImage(bmp); 24 g.Clear(Color.White); 25 //画噪线 26 for (int i = 0; i < 1; i++) 27 { 28 int x1 = rnd.Next(codeW); 29 int y1 = rnd.Next(codeH); 30 int x2 = rnd.Next(codeW); 31 int y2 = rnd.Next(codeH); 32 Color clr = color[rnd.Next(color.Length)]; 33 g.DrawLine(new Pen(clr), x1, y1, x2, y2); 34 } 35 //画验证码字符串 36 for (int i = 0; i < chkCode.Length; i++) 37 { 38 string fnt = font[rnd.Next(font.Length)]; 39 Font ft = new Font(fnt, fontSize); 40 Color clr = color[rnd.Next(color.Length)]; 41 g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0); 42 } 43 //画噪点 44 for (int i = 0; i < 100; i++) 45 { 46 int x = rnd.Next(bmp.Width); 47 int y = rnd.Next(bmp.Height); 48 Color clr = color[rnd.Next(color.Length)]; 49 bmp.SetPixel(x, y, clr); 50 } 51 //清除该页输出缓存,设置该页无缓存 52 context.Response.Buffer = true; 53 context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0); 54 context.Response.Expires = 0; 55 context.Response.CacheControl = "no-cache"; 56 context.Response.AppendHeader("Pragma", "No-Cache"); 57 //将验证码图片写入内存流,并将其以 "image/Png" 格式输出 58 MemoryStream ms = new MemoryStream(); 59 try 60 { 61 bmp.Save(ms, ImageFormat.Png); 62 context.Response.ClearContent(); 63 context.Response.ContentType = "image/Png"; 64 context.Response.BinaryWrite(ms.ToArray()); 65 } 66 finally 67 { 68 //显式释放资源 69 bmp.Dispose(); 70 g.Dispose(); 71 } 72 }
前台 显示刷新
html:
<img id="codeImg" alt="刷新验证码!" style="margin-bottom: -8px; cursor: pointer;" src="/Core/VerifyCode.ashx"> <a href="#" onclick="return getVerifyCode();">看不清?</a>
javascript:
function getVerifyCode() { $('#codeImg').attr("src", "/Core/VerifyCode.ashx?d=" + generateMixed(10)); return false; } var chars = ['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']; function generateMixed(n) { var res = ""; for (var i = 0; i < n; i++) { var id = Math.ceil(Math.random() * 35); res += chars[id]; } return res; }
利用Session["Code"] 存储对应的生成的code代码 便于登录的时候做判断
最终显示结果: