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

    技术2026-08-03  2

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

     

    由此一个简单的验证码功能便大功告成~~~~

     

     

    最新回复(0)