C#-WebForm-★ 製作圖片驗證碼 ★

標籤：page   form   字串   yellow   分享   cat   fill   using   for   

<div>        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>　　　　　　　<%--TextBox-等待輸入驗證碼--%>        <asp:Image ID="Image1" runat="server" />　　　　　　　　　　　　　　　　 <%--Image-顯示驗證碼圖片--%>        <asp:Button ID="Button1" runat="server" Text="提交驗證" />　　　　　　 <%--Button-提交進行驗證--%>        <asp:Label ID="Label1" runat="server" Text="驗證中..."></asp:Label>　　 <%--Label-顯示驗證結果--%>    </div>

此時驗證碼為空白，不顯示任何東西

 

步驟：

一、給驗證碼圖片控制項加一個串連，此串連是.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(60,30);        //準備製作-        //設定畫布        Graphics g = Graphics.FromImage(img);        //輸出的字串        string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";        string s = "";        for (int i = 1; i <= 4; i++)        {            s += all.Substring(r.Next(all.Length),1);        }        //字串的字型        Font f=new Font ("微軟雅黑",16);        //字型的顏色        Brush b=new SolidBrush(Color.Red);        //起始位置        PointF p=new PointF (3,3);        //進行製作-        g.DrawString(s, f, b, p);        //進行儲存(儲存到流中)        img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png);        Response.End();    }}

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(60,30);        //準備製作-        //設定畫布        Graphics g = Graphics.FromImage(img);        //輸出的字串        string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";        string s = "";        for (int i = 1; i <= 4; i++)        {            s += all.Substring(r.Next(all.Length),1);        }        //字串的字型        Font f=new Font ("微軟雅黑",16);        //字型的顏色        Brush b=new SolidBrush(Color.Red);        //起始位置        PointF p=new PointF (3,3);        //進行製作-        g.DrawString(s, f, b, p);        //進行儲存(儲存到流中)        img.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Png);        Response.End();    }}

效果：

三、設定<提交驗證>功能

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 = "驗證失敗！";        }    }}

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 = "驗證失敗！";        }    }}

效果：

 

驗證成功自動重新整理

四、設定點擊驗證碼切換驗證碼 - 前端JS

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

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

五、設定驗證碼背景色和幹擾線　　填充矩形地區：FillRectangle

//設定背景色        g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), 0, 0, 70, 30);        //設定幹擾線        for (int i = 1; i <= 10; i++)        {            //隨機顏色            Color c_line = clist[r.Next(0, clist.Count)];            //幹擾線顏色、粗細            Pen p_line = new Pen(new SolidBrush(c_line), r.Next(1, 5));            //畫幹擾線            g.DrawLine(p_line, new PointF(r.Next(0, 70), r.Next(0, 30)), new PointF(r.Next(0, 70), r.Next(0, 30)));        }

//設定背景色        g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), 0, 0, 70, 30);        //設定幹擾線        for (int i = 1; i <= 10; i++)        {            //隨機顏色            Color c_line = clist[r.Next(0, clist.Count)];            //幹擾線顏色、粗細            Pen p_line = new Pen(new SolidBrush(c_line), r.Next(1, 5));            //畫幹擾線            g.DrawLine(p_line, new PointF(r.Next(0, 70), r.Next(0, 30)), new PointF(r.Next(0, 70), r.Next(0, 30)));        }

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

驗證碼圖片後台代碼：

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(70, 30);        //設定畫布        Graphics g = Graphics.FromImage(img);        //設定背景色        g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), 0, 0, 70, 30);        //設定幹擾線        for (int i = 1; i <= 10; i++)        {            //隨機顏色            Color c_line = clist[r.Next(0, clist.Count)];            //幹擾線顏色、粗細            Pen p_line = new Pen(new SolidBrush(c_line), r.Next(1, 5));            //畫幹擾線            g.DrawLine(p_line, new PointF(r.Next(0, 70), r.Next(0, 30)), new PointF(r.Next(0, 70), r.Next(0, 30)));        }        //輸出的字串        string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";        string s = "";        for (int i = 1; i <= 4; i++)        {            s += all.Substring(r.Next(all.Length), 1);        }        //產生的驗證碼放入全域變數中        Session["YZM"] = s;        //字串的字型        Font f = new Font("微軟雅黑", 16);        //字型的顏色        Brush b = new SolidBrush(Color.Red);        //起始位置        PointF p = new PointF(3, 3);        //進行製作-        g.DrawString(s, f, b, p);        //進行儲存(儲存到流中)        img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);        Response.End();    }}

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(70, 30);        //設定畫布        Graphics g = Graphics.FromImage(img);        //設定背景色        g.FillRectangle(new SolidBrush(clist[r.Next(clist.Count)]), 0, 0, 70, 30);        //設定幹擾線        for (int i = 1; i <= 10; i++)        {            //隨機顏色            Color c_line = clist[r.Next(0, clist.Count)];            //幹擾線顏色、粗細            Pen p_line = new Pen(new SolidBrush(c_line), r.Next(1, 5));            //畫幹擾線            g.DrawLine(p_line, new PointF(r.Next(0, 70), r.Next(0, 30)), new PointF(r.Next(0, 70), r.Next(0, 30)));        }        //輸出的字串        string all = "abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";        string s = "";        for (int i = 1; i <= 4; i++)        {            s += all.Substring(r.Next(all.Length), 1);        }        //產生的驗證碼放入全域變數中        Session["YZM"] = s;        //字串的字型        Font f = new Font("微軟雅黑", 16);        //字型的顏色        Brush b = new SolidBrush(Color.Red);        //起始位置        PointF p = new PointF(3, 3);        //進行製作-        g.DrawString(s, f, b, p);        //進行儲存(儲存到流中)        img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);        Response.End();    }}

 

 

C#-WebForm-★ 製作圖片驗證碼 ★