实现Web验证码图片-原理
实现验证码的基础
GDI+ graphics device interface plus的缩写,即图形设备接口。GDI+为开发者提供了一组实现与各种设备(具有图形化能力但不涉及图形细节的设备)进行交互的库函数。C#通过Bitmap类创建位图对象、Grephics类创建画板对象,再通过Pen类、Brush类、Color类等画位图:
Point结构 在二维平面中 定义点坐标的有序对。常用于定义 窗体或控件位置、其他图形(线条/矩形等)边界。
创建:Point p = new Point(30,90);
IsEmpty属性检测Point结构是否为空。
Size结构 存储有序整数对。常用于定义 窗体、空间呵其他矩形区域的大小。
第一个构造函数接受一个Point结构: Point p = new Point(30,90);
Size s = new Size(p);
第二个构造函数接受二个int值:Size s = new Size(30,90);
主要属性:Whdtn、hight、isEmpty
Rectangle结构 存储四个整数(表矩形位置和大小)。由一个定义左上角的Point结构 和 一个定义大小的Size结构 组成。
主要属性:Location 左上角坐标、Size 矩形大小、Height/Width 矩形高宽、Left/Right 左右边x坐标、Top/Bottom 上下边y坐标、isEmpty
实现验证码主要语法:
//位图对象 Bitmap bmp = new Bitmap(120,32);
//画板对象 Graphics gp = Graphics.FromImage(bmp);
//画板背景色 gp.Clear(Color.Silver); 默认为black
//起点对象 Point p1 = new Point(0, 4);
//画笔对象 Pen p = new Pen(Color.Red);
//画刷颜色 Brush s = Brushes.Red;
//文字对象 string code = "";
//文字保存到会话中 Session["checkcode"] = code;
//画板绘制文字 gp.DrawString(code, new Font("楷体", 14), s, p1);(内容,字体,颜色,起点坐标)
//位图输出到页面 bmp.Save(Response.OutputStream, ImageFormat.Gif);
开始验证码的实现:
一、创建一个一般应用程序(yzm.ashx)
using System.Drawing; (此命名空间给GDI+提供基本图形处理功能的访问。) using System.Drawing.Imaging; public class YZM : IHttpHandler,System.Web.SessionState.IRequiresSessionState { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/JPEG";///将返回类型设置为JPEG格式
Bitmap bitmap = new Bitmap(100,50);//创建一个Image位图对象。 Graphics g = Graphics.FromImage(bitmap);//从指定的Image位图创建一个Graphics对象
Random rand = new Random();//创建一个随机数变量 int code=rand.Next(1000,9999);//利用Next()返回在1000到9999之间的飞非负随机数。 string strCode = code.ToString();//将随机数转换为string类型。
HttpContext.Current.Session["Code"] = strCode;//必须实现System.Web.SessionState.IRequestSessionState接口后才能在ashx中读写Session!!!
g.DrawString(strCode,new Font("黑体",16),Brushes.Silver,new Point(5,15));//绘制位图!<graphicsVar>.DrawString(随机数,字体,随机数颜色,随机数坐标)
//接下来用for循环为验证码位图添加随机直线 for (int i = 0; i < 10; i++) { int x1 = rand.Next(bitmap.Width);//<randomVar>.Next(int maxValue)指定随机数最大值 int y1 = rand.Next(bitmap.Height); int x2 = rand.Next(bitmap.Width); int y2 = rand.Next(bitmap.Height); g.DrawLine(new Pen(Color.Red), x1, y1, x2, y2); /*可用类似方式定义下列属性:g.DrawRectangle(new Pen(Color.Silver), 1, 1, bitmap.Width - 3, bitmap.Height - 3);//给验证码位图绘画矩形边框 |
虚线框中的代码不是必须的,只是对位图的进一步绘画。
bitmap.Save(context.Response.OutputStream,ImageFormat.Jpeg);//用将位图添加到输出流、
} public bool IsReusable { get { return false; } } }
二、创建一个验证页面,调试!
protected void 提交验证码按钮_Click(object sender, EventArgs e) {
//先从Session中读取正确的验证码,再验证用户输入的值
string 正确的验证码 = Convert.ToString(Session["Code"]);
if (TextBox1.Text == 正确的验证码)
{
Label1.Text = "验证成功";
}
else
{
Label1.Text = "输入的验证码有误";
}
补充1:
如何实现点击图片刷新验证码?可添加onclick事件重新加载图片源:src=“ ”
<img src="YZM.ashx" onclick="this.src='YZM.ashx?a='+new Date()" />
注:添加onclick="this.src='YZM.ashx'" 图片是不会刷新,需不同的URL地址。
可以添加onclick="this.src='YZM.ashx?a=aaa'" 但图片只会刷新一次。
所以需不同的可动态改变的URL地址。可在后面加上当前时间:+new Data()