C# 使用GDI(Graphics)绘制 应用 网站 “登录验证码“

Posted 2023-01-21 生产队的驴.

效果图：

有基础的直接看代码：
详细解读下面划
因为用户输入错误的时候 需要重制验证码 所以写成了一个方法
直接调用就可以了

注释备注的都非常清楚

Draw();

 string str = string.Empty;
        //用用效验 输入的验证码是否正确
        private void Draw()
        //这是一个方法
        
            str = string.Empty ;
            //点击的时候去除上次生成的数字

            Color[] BackColor = Color.Purple,  Color.Chocolate,Color.Aquamarine, Color.Brown,Color.Aqua,Color.GreenYellow;
            //    颜色数组  窗体的背景图颜色

           Color[] colo =  Color.White,Color.Blue, Color.Red, Color.Pink, Color.Yellow, Color.Green, Color.Black ;
            // 验证码字体的颜色

            string[] type =  "微软雅黑", "黑体", "华文行楷", "等线", "楷体", "新宋体", "宋体" ;
            //验证码的字体  

            Bitmap bmp = new Bitmap(100, 30);
            //创建画本   100为宽度 30为高度 
      
            Random r = new Random();
            //生出随机数 用于随机的颜色 随机的字体 等等....

            pictureBox1.BackColor = BackColor[r.Next(0, BackColor.Length-1)] ;
            //图片背景颜色  让随机数给赋值  这样颜色就是随机的了 

           string text = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
            //出现的验证码文本 也可以是中文或者其他字符等 自己自定义



            for (int i = 0; i < 4; i++)//4为验证码的个数
            
                str += text[r.Next(0, text.Length)];
                //随机生成的字符给这个字符串
            
           //这循环体就是生成验证码的 


            using (Graphics Photo = Graphics.FromImage(bmp))
            
                //创建gdi画图  FromImage：表示在图片上画
                //   画板为bmp对象 也就是上面创建的
                //using:帮助gdi释放资源的


                for (int i = 0; i < str.Length; i++)
                //这个循环 主要是把生成的验证码 画在图片框里

                    Point Site = new Point(i * 18, 0);
                    //每一个字体的位置 注意啥图片框的位置 不是窗体的位置
                    //i*18为x 0为y 轴  *18是为了 不让字符重嗲在一起
                    //每次循环字符隔18个像素 

                    Photo.DrawString(str[i].ToString(), new Font(type[r.Next(0, type.Length - 1)], 18, FontStyle.Regular), new SolidBrush(colo[r.Next(0, colo.Length - 1)]), Site);
                    //使用gdi画字符   需要画的字符串                  需要画的字体      //字体大小为18  字体效果为 普通效果                //字体的颜色                  //字体出现的位置
                


                for (int number = 0; number < 14; number++)
                //这循用来画线 数量为14个

                    Pen p = new Pen(colo[r.Next(0, colo.Length - 1)]);
                    //线的笔颜色

                    Photo.DrawLine(p, r.Next(0, 70), r.Next(0, 70), r.Next(0, 70), r.Next(0, 70));
                    //画线       笔颜色 第一点的x轴  第一点的y轴       第2点的x轴  第2点的y轴 
                    //线是需要两个点才可以连成线的哦
                

                pictureBox1.Image = bmp;
               // 都画完了后 赋值给图片框

            
        

---

前言:
验证码主要功能其就是封"网络蜘蛛"的也就是爬虫,主要就是防止用户使用软件 批量登录 刷赞 浏览 等 ，这对普通的用户造成非常的不公平，登录的时候使用验证码 验证是否为机器人 就可以很大程度的限制他们

因为这段时间是 高考的报名时间 在注册账号的时候，发现了他的验证码 在想起之前写的验证码…真是太low了
之前写的：

可以说就是个摆设…就是一个随机的数字 赋值给了一个标签

验证码改进后：

相似度挺高的

---

Graphics：
这主要是用来画图的，如线 圈 矩形 等,不仅可以在窗体上画,也可以做图片上画

验证码绘制
首先在窗体上拖入一个pictureBox1：

因为点击一次都需要换一组验证码,输入的验证码错误也需要换一组，为了方便，写成了一个方法

首先在方法外面定义一个公共的字符串变量 用于存生成的验证码 用户输入的字符需要和他效验

 string str = string.Empty;

方法体：

 public void Draw()
 
 

以下代码都需要写在方法体里

首先定义一下不会变的数据

图片框的颜色背景：
可以自己往里面继续加 这里就定义了6个 后面使用随机数进行切换

   Color[] BackColor = Color.Purple,  Color.Chocolate,Color.Aquamarine, Color.Brown,Color.Aqua,Color.GreenYellow;
         

紫色的就是他的背景 字体组和背景组的颜色尽量不要一样

字体颜色：

   Color[] colo =  Color.White,Color.Blue, Color.Red, Color.Pink, Color.Yellow, Color.Green, Color.Black ;
    // 验证码字体的颜色

为什么不一起使用背景数组的颜色？
因为使用的随机数 可能导致字体和背景的颜色 一模一样导致一部分字符难看清楚

所以字体和背景的颜色需要分开 而且颜色不能是全部一样的

定义随机出现的字符：

这里没什么好说的 就是出现的验证码而已 都是自定义的 自行更改 也可以设置中文的 这里使用的是 大小写和数字的组合

string text = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";

定义字符出现的字体：
仔细观察可以发现 每一个字体的验证码都是不规律的

 string[] type =  "微软雅黑", "黑体", "华文行楷", "等线", "楷体", "新宋体", "宋体" ;
        //验证码的字体  

当然也可以自己往里面添加更多的字体

定义随机数：
这没什么好说的 就是出现随机的数字

  Random r = new Random();
            //生出随机数 用于随机的颜色 随机的字体 等等....

定义画板：

 Bitmap bmp = new Bitmap(100, 30);
  //创建画本   100为宽度 30为高度 

使用随机背景颜色：
这一行代码就是 通过生成的随机数 去访问BackColor背景颜色数组的颜色 然后在赋值给pictureBox1

 pictureBox1.BackColor = BackColor[r.Next(0, BackColor.Length-1)] ;
            //图片背景颜色  让随机数给赋值  这样颜色就是随机的了 

随机抽取四位数做验证码：

  for (int i = 0; i < 4; i++)//4为验证码的个数
            
                str += text[r.Next(0, text.Length)];
                //随机生成的字符给这个字符串
            
           //这循环体就是生成验证码的 

使用GDI：
创建Gdi 在画板上画

Graphics Photo = Graphics.FromImage(bmp)

通过循环体把字符画出来：

for (int i = 0; i < str.Length; i++)
 //这个循环 主要是把生成的验证码 画在图片框里

 Point Site = new Point(i * 18, 0);
 //每一个字体的位置 注意啥图片框的位置 不是窗体的位置
 //i*18为x 0为y 轴  *18是为了 不让字符重嗲在一起
 //每次循环字符隔18个像素 

 Photo.DrawString(str[i].ToString(), new Font(type[r.Next(0, type.Length - 1)], 18, FontStyle.Regular), new SolidBrush(colo[r.Next(0, colo.Length - 1)]), Site);
                    //使用gdi画字符   需要画的字符串                  需要画的字体      //字体大小为18  字体效果为 普通效果                //字体的颜色               //字体出现的位置
                

这时候已经差不多成形了 接下来就是画一些干扰线了

绘制干扰线：

 for (int number = 0; number < 14; number++)
        //这循用来画线 数量为14个

            Pen p = new Pen(colo[r.Next(0, colo.Length - 1)]);
            //线的笔颜色

            Photo.DrawLine(p, r.Next(0, 70), r.Next(0, 70), r.Next(0, 70), r.Next(0, 70));
            //画线       笔颜色 第一点的x轴  第一点的y轴       第2点的x轴  第2点的y轴 
            //线是需要两个点才可以连成线的哦
        

全部大功告成

直接赋值给图片框就行了

赋值图片框

 pictureBox1.Image = bmp;
           // 都画完了后 赋值给对话框

这样就完成了

按钮代码：
主要就是判断验证码输入的正确不正确

if (textBox1.TextLength <=0)
            
                //判断是否输入验证码
                MessageBox.Show("请输入验证码");
                return;
            


            string match = str.ToLower(); //输入的英文转成小写 
            string match2 = str.ToUpper();//输入的英文转成大写 
            if (textBox1.Text==match|| textBox1.Text==str|| textBox1.Text== match2)
            
               //


                //输入正确的验证码 执行的代码
              
            
            else 

                MessageBox.Show("验证码错误");
                Draw();//输入错误的验证码 重新调用生成
                textBox1.Clear();//情况文本框内容
                return;

            
                
               

---

完整代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Message

    public partial class Form1 : Form
    
        public Form1()
        
            InitializeComponent();
        

        private void label1_Click(object sender, EventArgs e)
        

           

        

        private void Form1_Load(object sender, EventArgs e)
        
            Draw();
        

        private void pictureBox1_Click(object sender, EventArgs e)        
        


            Draw();

        

        string str = string.Empty;
        //用用效验 输入的验证码是否正确
        public void Draw()
        
            str = string.Empty ;

            Color[] BackColor = Color.Purple,  Color.Chocolate,Color.Aquamarine, Color.Brown,Color.Aqua,Color.GreenYellow;
            //    颜色数组  窗体的背景图颜色

           Color[] colo =  Color.White,Color.Blue, Color.Red, Color.Pink, Color.Yellow, Color.Green, Color.Black ;
            // 验证码字体的颜色

            string[] type =  "微软雅黑", "黑体", "华文行楷", "等线", "楷体", "新宋体", "宋体" ;
            //验证码的字体  

            Bitmap bmp = new Bitmap(100, 30);
            //创建画本   100为宽度 30为高度 
      
            Random r = new Random();
            //生出随机数 用于随机的颜色 随机的字体 等等....

            pictureBox1.BackColor = BackColor[r.Next(0, BackColor.Length-1)] ;
            //图片背景颜色  让随机数给赋值  这样颜色就是随机的了 

          string text = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
            //出现的验证码文本 也可以是中文或者其他字符等 自己自定义



            for (int i = 0; i < 4; i++)//4为验证码的个数
            
                str += text[r.Next(0, text.Length)];
                //随机生成的字符给这个字符串
            
           //这循环体就是生成验证码的 


            using (Graphics Photo = Graphics.FromImage(bmp))
            
                //创建gdi画图  FromImage：表示在图片上画
                //   画板为bmp对象 也就是上面创建的
                //using:帮助gdi释放资源的


                for (int i = 0; i < str.Length; i++)
                //这个循环 主要是把生成的验证码 画在图片框里

                    Point Site = new Point(i * 18, 0);
                    //每一个字体的位置 注意啥图片框的位置 不是窗体的位置
                    //i*18为x 0为y 轴  *18是为了 不让字符重嗲在一起
                    //每次循环字符隔18个像素 

                    Photo.DrawString(str[i].ToString(), new Font(type[r.Next(0, type.Length - 1)], 18, FontStyle.Regular), new SolidBrush(colo[r.Next(0, colo.Length - 1)]), Site);
                    //使用gdi画字符   需要画的字符串                  需要画的字体      //字体大小为18  字体效果为 普通效果                //字体的颜色                  //字体出现的位置
                


                for (int number = 0; number < 14; number++)
                //这循用来画线 数量为14个

                    Pen p = new Pen(colo[r.Next(0, colo.Length - 1)]);
                    //线的笔颜色

                    Photo.DrawLine(p, r.Next(0, 70), r.Next(0, 70), r.Next(0, 70), r.Next(0, 70));
                    //画线       笔颜色 第一点的x轴  第一点的y轴       第2点的x轴  第2点的y轴 
                    //线是需要两个点才可以连成线的哦
                

                pictureBox1.Image = bmp;
               // 都画完了后 赋值给对话框

            
         


        

        private void button1_Click(object sender, EventArgs e)
        

            if (textBox1.TextLength <=0)
            
                //判断是否输入验证码
                MessageBox.Show("请输入验证码");
                return;
            


            string match = str.ToLower(); //输入的英文转成小写 
            string match2 = str.ToUpper();//输入的英文转成大写 
            if (textBox1.Text==match|| textBox1.Text==str|| textBox1.Text== match2)
            
               //


                //输入正确的验证码 执行的代码
              
            
            else 

                MessageBox.Show("验证码错误");
                Draw();//输入错误的验证码 重新调用生成
                textBox1.Clear();//情况文本框内容
                return;

            
                
               
                
        
    

纯手打，点个赞呗~