zoukankan      html  css  js  c++  java
  • 图片验证码

    客户端源码:

    注意,在 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>
  • 相关阅读:
    UIImage的使用
    UIImageVIew的使用
    关于View和VIewController的关系和理解
    ZT Android 4.2蓝牙介绍
    2013深秋红土地旅行计划之井冈山
    系统性能优化
    Reorder List
    Word Break II
    iOS.CocoaPods.0
    Python 知识要点:案例:士兵突击
  • 原文地址:https://www.cnblogs.com/yunpeng521/p/7469974.html
Copyright © 2011-2022 走看看