客户端源码:
注意,在 Image控件中要加一个属性 ImageUrl="~/YZM.aspx" 该属性指向一个路径,这个路径就是新建页面的,写有验证码的路径,波浪线是根目录
<form id="form1" runat="server"> <div> <%--要输入的验证码文本框--%> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <%--显示出来的图片验证码--%> <asp:Image ID="Image1" ImageUrl="~/YZM.aspx" runat="server" /><br /> <%--是否验证成功的提示--%> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <%--验证按钮--%> <asp:Button ID="Button1" runat="server" Text="验证" /> </div> </form>
先建一个新的界面,客户端什么都不用写,直接在后台服务端写代码:
首先是准备画布(Bitmap位图,好处是,像素固定,想要多少像素就是多少像素)
Bitmap img = new Bitmap(100, 50);
protected void Page_Load(object sender, EventArgs e) { //颜色随机 List<Color> clist = new List<Color>(); clist.Add(Color.Red); clist.Add(Color.Orange); clist.Add(Color.Pink); clist.Add(Color.Yellow); clist.Add(Color.Blue); clist.Add(Color.Aqua); clist.Add(Color.Green); clist.Add(Color.SeaGreen); clist.Add(Color.Orchid); Bitmap img = new Bitmap(100, 50); Graphics g = Graphics.FromImage(img); //随机数 Random r = new Random(); //填充矩形的背景色,这里,必须是在画干扰线之前填充,不然,填充完之后,一刷,干扰线就刷没了, //后面的参数是从最左上角开始画,画多少呢,画画布规定好的宽度和高度 g.FillRectangle(new SolidBrush(clist[r.Next(0, clist.Count)]), 0, 0, 100, 50); //干扰线的随机粗细 for (int i = 0; i < 10; i++) { //取干扰线的随机色‘clist[r.Next(0, clist.Count)])’和画笔的随机粗细‘r.Next(1, 5)’ Pen pe = new Pen(new SolidBrush(clist[r.Next(0, clist.Count)]), r.Next(1, 5)); //干扰线的随机起始位置的坐标 Point startP = new Point(r.Next(0, 100), r.Next(0, 50)); //干扰线的随机终止位置的坐标 Point endP = new Point(r.Next(0, 100), r.Next(0, 50)); //所画的干扰是线‘g.DrawLine’ g.DrawLine(pe, startP, endP); } string s = ""; //验证码的内容 string all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"; for (int i = 0; i < 4; i++) { //随机去的验证码内容 s += all.Substring(r.Next(0, all.Length), 1); } g.DrawString(s, new Font("黑体", 30), new SolidBrush(clist[r.Next(0, clist.Count)]), new PointF(0, 0)); //最后是验证码验证,就是把‘s’记录下来 Session["yzm"] = s; img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg); //Response.OutputStream 输出流 //System.Drawing.Imaging.ImageFormat.Jpeg 输出格式 }
写完验证码之后,在客户端的后台按钮点击事件里写点击事件
protected void Page_Load(object sender, EventArgs e) { Button1.Click += Button1_Click; } void Button1_Click(object sender, EventArgs e) { string s = TextBox1.Text; if (s.ToUpper() == Session["yzm"].ToString().ToUpper()) Label1.Text = "正确!"; else Label1.Text = "错误"; }
点击图片验证码,可以换图片,那就要写JS点击事件
定义一个count
客户端JS源码:
<script type="text/javascript"> var count = 0; document.getElementById("Image1").onclick = function () { this.src = "yzm.aspx?a=" + count; count++; } </script>