图片验证码

客户端源码：

注意，在 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>