C#-WebForm-★ 制作图片验证码 ★

时间:2023-03-10 02:52:32
C#-WebForm-★ 制作图片验证码 ★

在前台放在如下四个控件

<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>       <%--TextBox-等待输入验证码--%>
<asp:Image ID="Image1" runat="server" ImageUrl="YZM.aspx" />     <%--Image-显示验证码图片--%>
<asp:Button ID="Button1" runat="server" Text="提交验证" />       <%--Button-提交进行验证--%>
<asp:Label ID="Label1" runat="server" Text="验证中..."></asp:Label>   <%--Label-显示验证结果--%>
</div>

C#-WebForm-★ 制作图片验证码 ★

此时验证码为空,不显示任何东西

步骤:

一、给验证码图片控件加一个连接,此连接是.aspx网页,此网页不需要前台,只需要打开时后台做一个验证码图片展示出来即可

<asp:Image ID="Image1" runat="server" ImageUrl="YZM.aspx" />

二、在YZM.aspx后台中制作简单验证码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing; public partial class YZM : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Random r = new Random(); //制作“位图”(指定长宽的矩形区域)
Bitmap img = new Bitmap(,); //准备制作-
//设定画布
Graphics g = Graphics.FromImage(img);
//输出的字符串
string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
string s = "";
for (int i = ; i <= ; i++)
{
s += all.Substring(r.Next(all.Length),);
}
//字符串的字体
Font f=new Font ("微软雅黑",);
//字体的颜色
Brush b=new SolidBrush(Color.Red);
//起始位置
PointF p=new PointF (,);
//进行制作-
g.DrawString(s, f, b, p); //进行保存(保存到流中)
img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png);
Response.End();
}
}

YZM.aspx后台代码

效果:

C#-WebForm-★ 制作图片验证码 ★

三、设置<提交验证>功能

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btn_verification.Click+=btn_verification_Click;
}
//<提交验证>按钮点击事件
void btn_verification_Click(object sender, EventArgs e)
{
string s1 = txt_userYZM.Text;
string s2 = Session["YZM"].ToString();
if (s1.ToUpper() == s2.ToUpper())
{
Label1.Text = "验证成功!";
}
else
{
Label1.Text = "验证失败!";
}
}
}

<提交验证>按钮事件

效果:

C#-WebForm-★ 制作图片验证码 ★

验证成功自动刷新

四、设置点击验证码切换验证码 - 前端JS

<script type="text/javascript">
var a = ;
document.getElementById("Image1").onclick = function () {
this.setAttribute("src", "yzm.aspx?id=" + a);
a++;
}
</script>

设置点击验证码切换验证码

五、设置验证码背景色和干扰线  填充矩形区域:FillRectangle

//设定背景色
g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), , , , ); //设置干扰线
for (int i = ; i <= ; i++)
{
//随机颜色
Color c_line = clist[r.Next(, clist.Count)];
//干扰线颜色、粗细
Pen p_line = new Pen(new SolidBrush(c_line), r.Next(, ));
//画干扰线
g.DrawLine(p_line, new PointF(r.Next(, ), r.Next(, )), new PointF(r.Next(, ), r.Next(, )));
}

设置验证码背景色和干扰线

===========================================

验证码图片后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing; public partial class YZM : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Random r = new Random();
//颜色集合
List<Color> clist = new List<Color>();
clist.Add(Color.Yellow);
clist.Add(Color.Pink);
clist.Add(Color.Blue);
clist.Add(Color.Green);
clist.Add(Color.Orange);
clist.Add(Color.Black); //制作“位图”(指定长宽的矩形区域)
Bitmap img = new Bitmap(, ); //设定画布
Graphics g = Graphics.FromImage(img); //设定背景色
g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), , , , ); //设置干扰线
for (int i = ; i <= ; i++)
{
//随机颜色
Color c_line = clist[r.Next(, clist.Count)];
//干扰线颜色、粗细
Pen p_line = new Pen(new SolidBrush(c_line), r.Next(, ));
//画干扰线
g.DrawLine(p_line, new PointF(r.Next(, ), r.Next(, )), new PointF(r.Next(, ), r.Next(, )));
} //输出的字符串
string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
string s = "";
for (int i = ; i <= ; i++)
{
s += all.Substring(r.Next(all.Length), );
}
//生成的验证码放入全局变量中
Session["YZM"] = s;
//字符串的字体
Font f = new Font("微软雅黑", );
//字体的颜色
Brush b = new SolidBrush(Color.Red);
//起始位置
PointF p = new PointF(, );
//进行制作-
g.DrawString(s, f, b, p); //进行保存(保存到流中)
img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
Response.End();
}
}

验证码图片的后台代码

C#-WebForm-★ 制作图片验证码 ★