WebForm帶有圖片的驗證碼

時間 2019-11-12

標籤 webform 帶有圖片驗證碼简体版

原文原文鏈接

驗證碼造成的部分在一個aspx文件中：html

頁面設置dom

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #Image1 {
        cursor:pointer;
        }


    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    驗證碼：<asp:Image ID="Image1" runat="server" ImageUrl="tupian.aspx" /><%--ImageUrl指向一個Web窗口tupian.aspx 在該窗體中處理驗證碼--%>
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br /><br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><%--輸入驗證碼文本區--%>
        <asp:Button ID="Button1" runat="server" Text="登陸" />
    </div>
    </form>
</body>
</html>
<script>
    var a = 0;//a的做用是使每次點擊驗證碼圖片都會變
    document.getElementById("Image1").onclick = function () {//js更改屬性，若是更改後的屬性和之前的屬性同樣，不變
        this.setAttribute("src", "tupian.aspx?id=" + a);
        a++;
    };



</script>

View Code

頁面功能代碼ide

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Click += Button1_Click;
    }

    void Button1_Click(object sender, EventArgs e)
    {
        if (TextBox1.Text.Trim().ToUpper() ==  Session["yzm"].ToString().ToUpper())
        {
            Label1.Text = "正確";
        }
        else
        {
            Label1.Text = "錯誤";
        }
    }
}

View Code

tupian.aspx代碼頁面（重點）ui

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 tupian : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //建立圖片。位圖
        Bitmap bmap = new Bitmap(120,50);//寬：100px ；高：50px
        
        //繪製畫布
        Graphics g = Graphics.FromImage(bmap);
       
        Random r = new Random();
        //建立顏色集合
        List<Color> clist = new List<Color>();
        clist.Add(Color.Peru);
        clist.Add(Color.Purple);
        clist.Add(Color.Pink);
        clist.Add(Color.PaleVioletRed);

        //繪製水印照片背景
        g.FillRectangle(new SolidBrush(clist[r.Next(0,clist.Count)]),0,0,120,50);
        for (int h = 0; h < 6; h++)//位置不一樣，能夠設置干擾線覆蓋文字，仍是文字覆蓋干擾線
        {
            //繪製干擾線
            Pen p = new Pen(new SolidBrush(clist[r.Next(0, clist.Count)]), r.Next(0, 8));
            g.DrawLine(p, r.Next(0, 120), r.Next(0, 50), r.Next(0, 120), r.Next(0, 50));
        }
        //繪製驗證碼文字
        string s = "";
        string ss = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
        for (int i = 0; i < 4; i++)
        {
            s += ss.Substring(r.Next(0,ss.Length),1);
        }
        Session["yzm"] = s;//傳驗證碼的值
        //繪製文字格式和大小
        Font f = new Font("宋體",30);
        //繪製畫筆顏色，即文字顏色
        Brush b = new SolidBrush(System.Drawing.Color.Red);
        //繪製水印
        g.DrawString(s,f,b,1,5);
        //將水印照片存在」流「中，而且設定照片格式後綴
        bmap.Save(Response.OutputStream,System.Drawing.Imaging.ImageFormat.Jpeg);
        //中止輸出
        Response.End();
    }
}