CFXIXI工作室首页
CF西西的博客 | All posts tagged '验证码'

如何创建4位数字验证码图片(ASP.NET MVC2环境下)

10. 三月 2012
原文在我的csdn博客上:http://blog.csdn.net/xiaoguang44/article/details/6195770     基于mvc2架构下的验证码由一个controll中的action负责管理view上 的一个动作,这是在controll中创建验证码图片的过程。   public FileResult ConfirmCode() { //生成4位随机数,并将其转为string型,传入session,4位数字由随 机数从1000-9999中提取。 string ConfirmCode = string.Empty; Random rand = new Random(); ConfirmCode = rand.Next(1000, 9999).ToString(); Session["QuickChannelConfirmCode"] = ConfirmCode; //大自然中的任何颜色都可以由三基色红绿蓝组合而成,三色的颜色的变 化都可以量化为(0-255)的数值,因此只要控制红、绿、蓝三色的取值 便可以随机出验证码的颜色//于是我首先先实例化了两个随机数的对象rand1、rand2,然后通过随机 数中Next的方法在(0-255)中提取数字//为了让随机色都是鲜明的颜色,我们控制rgb中蓝色,由于蓝色在取(145-255)的 时候,颜色为亮色。//这里使用了两个逻辑表达式,blue1的取值逻辑,假设(red的值+green大 于400,blue1的值则取为0,否则blue1的值为(400-red-green))//由于上面的逻辑可能导致blue1的值大于255,为了防止这一情况的出 现,再设一个逻辑表达式,假设大于255时,蓝色的值取为255。//最后通过Color类的FromArgb方法,生成一个随机色。 Random rand1 = new Random(); Random rand2 = new Random(); int red = rand1.Next(256); int green = rand2.Next(256); int blue1 = (red + green > 400) ? 0 : 400 - red - green; int blue2 = (blue1 > 255) ? 255 : blue1; Color col = Color.FromArgb(red,green,blue2);   生成了数字与颜色后,我们需要将这些元素组合并绘制成图片。从绘图的角度 上来说,一张图片的生成要有可绘画区域以及包裹它的框架。    于是首先我们实例化Bitmap类,生成一个宽imagewidth,长20的可绘画区域bmp。将其封装至框架g中,这样g中就存在了一个可绘画区域(bmp)。g.Clear(Color.White)将可绘画区域内所有的颜色清除,并填充白色。类似于PS的起始状态,此时我们对g进行绘画,绘制一个矩形(由于绘制矩形需要告 诉绘图面板绘图的工具、起始坐标、结束坐标),这里使用了pen,从 (0,0)位置绘制到(imagewidth-1,19)这个坐标.绘制完矩形后,绘制矩形内的内容,由于绘制的是string类型,因此需要准备四大参 数1.绘制的内容(上面生成的数字),2.字体,3.用什么“工具”画4.从哪开始画(起始位置),综合上面的四点,我们便可以使用DrawString方法绘制验 证码了。 int imageWidth = ConfirmCode.Length * 13; Bitmap bmp = new Bitmap(imageWidth,20); Graphics g = Graphics.FromImage(bmp); g.Clear(Color.White); g.DrawRectangle(new Pen(Color.LightGray,1),0,0,imageWidth-1,19); Font font = new Font("Arial", 16); Brush brush = new SolidBrush(col);//col 为上文随机出的颜色 Point po = new Point(0, 0); g.DrawString(ConfirmCode,font,brush,po);   //生成后的图片需要输出。为了输出,首先我们要先要告诉游览器图片输出的类型(由 于游览器只识别MIME码),为了避免乱码,指定输出类型为image/jpeg//图片以流的方式输出至游览器,因此需要首先将图片bmp存入内存的流ms,并格式化 其图片类型为jpeg//设置内存流ms的查找起点位置在0这个位置//最后以文件流的形式返回至视图.   Response.ContentType = "image/jpeg"; MemoryStream ms = new MemoryStream(); bmp.Save(ms, ImageFormat.Jpeg); ms.Seek(0, SeekOrigin.Begin); return new FileStreamResult(ms, "image/jpeg"); }   制作完了controll中的逻辑,我们回到视图,先创建一个简单的页面(没有绑CSS),并 声明调用jquery。   <form id="form1" method="post"> <label>姓名:</label> <input type="text" name="nameTextBox" id="nameTextBox" /><br /> <label>验证码:</label> <input type="text" name="textbox1" id="textbox1" /><br /> <label>Email</label> <input type="text" name="email" id="email" /> <img id="ConfirmImage" src="/Home/ConfirmCode" mce_src="Home/ConfirmCode" alt="验证码" /><br /> <span><a href="javascript:refreshPic()" mce_href="javascript:refreshPic()"> 看不清,换一张</a></span> <label><a href="../../Content/ohoopee2.jpg" mce_href="Content/ohoopee2.jpg" rel="bigPic">(点击放大)</a></label> <br /> <a href="javascript:check()" mce_href="javascript:check()">确认</a> </form>   在这个页面中,我们需要考虑几个问题。首先当两个textbox为空时,怎么办? 一般来讲,当出现这种情况的时候可以用js在页面层面进行判断。 于是我们写了一个validateAddress()的函数对当textbox中值为空的情况进行判断 并且,还要考虑正则表达式,防止用户的乱输字符的情形 。   function validateAddress() { if ($("#nameTextBox").val() == "") { alert("请输入姓名"); return; } if ($("#textbox1").val() == "") { alert("请输入验证码"); return; } if ($("#email").val() == "") { alert("请输入Email地址"); return; } if ($("#email").val() != "") { var reg = /^[a-z0-9]([a-z0-9]*[-_/.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[/.][a-z]{2,3}([/.][a-z]{2})?$/i; if (!reg.test($("#email").val())) { alert("请输入正确的EMAIL地址"); return; } } $("#form1").submit(); }   第二个需要考虑的问题是验证码看不清时的更换,参考邮箱的“看不清”链接,我们 同样使用一个js,绑在这段文字上。 函数采用了局部刷新的做法,通过document的方法定位到img控件的src属性上 当点击时,执行服务端的action(“/Home/ConfirmCode”),使页面在正体不 刷新的情况下,局部刷新。   function refreshPic() { document.getElementById("ConfirmImage").src = "/Home/ConfirmCode"; }   除此以外,对于验证码是否正确的判断。我们使用了url传值的方法,在服务器端进行判断。 函数的作用在于通过jquery中getscript的方法,将值通过url传递给服务端, 由服务端进行逻辑判断,最后通过服务端返回的给页面,由js根据返回结果给出 提示文字。   页面方法: function check() { $.getScript("/Home/CheckCode?code=" + $("#textbox1").val(), function (j) { if (eval(j) == true) { validateAddress(); alert("验证通过"); } else { refreshPic(); alert("验证码错误!请检查"); } }) } 服务端逻辑: 注意当session为null以及为”“时的情况,不注意的话系统可能会报错 。 还有就是session使用后一定要有资源释放的设定,不然会造成资源的 紧张,影响网站的运行的效率。   public ActionResult CheckCode() { string quickChannalConfirmCode = Request.QueryString["code"].ToString(); if (Session["QuickChannelConfirmCode"] == null || "".Equals(Session["QuickChannelConfirmCode"].ToString())) { return Content("false"); } string yanzheng=Session["QuickChannelConfirmCode"].ToString(); Session.Remove("QuickChannelConfirmCode"); if (quickChannalConfirmCode ==yanzheng) { return Content("true"); } else { return Content("false"); } }   由此一个简单的验证码功能便大功告成~~~~

.Net MVC