http://www.wingoon.com 首頁登錄口(大小為:75*21)
http://app.wingoon.com/job/member/member_login.aspx?requestUrl=/job/member/index.aspx (大小為:100*32)
制作步驟：
（1）準(zhǔn)備你想要的多張圖片（數(shù)量不限，由你自己決定），將它們放在一個統(tǒng)一的目錄下，比如我這里是“ValidateCodeImg”。圖片尺寸盡量適合你的驗證碼尺寸。這樣有利于達(dá)到最佳性能比。
（2）將以下代碼分別COPY到你的工程目錄下（記得放在ValidateCodeImg目錄的上一級目錄中）。
二、相關(guān)代碼：
1、 // ValidateCode.aspx頁面:
-----------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidateCode.aspx.cs" Inherits="Comm_ValidateCode" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml
" >
<head runat="server">
<title>生成圖片驗證碼</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
2、
// ValidateCode.aspx.cs
--------------------------------------
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
public partial class Comm_ValidateCode : System.Web.UI.Page
{
int _width = 75;
int _height = 21;
// int _width = 128;
// int _height = 40;
string imgDir = @"ValidateCodeImg";
public int Width
{
get
{
return _width;
}
set
{
_width = value;
}
}
public int Height
{
get
{
return _height;
}
set
{
_height = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["w"] != null)
{
try
{
this._width = int.Parse(Request.QueryString["w"].Trim());
}
catch (Exception exc)
{
//
}
}
if (Request.QueryString["h"] != null)
{
try
{
this._height = int.Parse(Request.QueryString["h"].Trim());
}
catch (Exception exc)
{
//
}
}
// 4位數(shù)字的驗證碼
if (!IsPostBack)
{
string str_ValidateCode = GetRandomNumberString(4);
//用于驗證的Session
Session["ValidateCode"] = str_ValidateCode;
CreateImage(str_ValidateCode);
}
}
// 生成隨機(jī)數(shù)字字符串
public string GetRandomNumberString(int int_NumberLength)
{
string str_Number = string.Empty;
Random theRandomNumber = new Random();
for (int int_index = 0; int_index < int_NumberLength; int_index++)
str_Number += theRandomNumber.Next(10).ToString();
return str_Number;
}
//生成隨機(jī)顏色
public Color GetRandomColor()
{
Random RandomNum_First = new Random((int)DateTime.Now.Ticks);
System.Threading.Thread.Sleep(RandomNum_First.Next(50));
Random RandomNum_Sencond = new Random((int)DateTime.Now.Ticks);
int int_Red = RandomNum_First.Next(256);
int int_Green = RandomNum_Sencond.Next(256);
int int_Blue = (int_Red + int_Green > 400) ? 0 : 400 - int_Red - int_Green;
int_Blue = (int_Blue > 255) ? 255 : int_Blue;
return Color.FromArgb(int_Red, int_Green, int_Blue);
}
public FileInfo[] GetAllFilesInPath(string path)
{
System.IO.DirectoryInfo di = new DirectoryInfo(path);
return di.GetFiles("*.jpg", SearchOption.TopDirectoryOnly);
}
public string GetRandomFile(string path)
{
FileInfo[] fi = this.GetAllFilesInPath(path);
Random rand = new Random(new Guid().GetHashCode() + (int)DateTime.Now.Ticks);
int k = rand.Next(0, fi.Length);
return fi[k].FullName;
}
public int GetRandomAngle()
{
Random rand = new Random((int)DateTime.Now.Ticks);
System.Threading.Thread.Sleep(rand.Next(50));
return rand.Next(-45, 45);
}
//根據(jù)驗證字符串生成最終圖象
public void CreateImage(string str_ValidateCode)
{
//int int_ImageWidth = str_ValidateCode.Length * 13;
//int width = int_ImageWidth;
int int_ImageWidth = this.Width;
int width = int_ImageWidth;
int height = this.Height;
string filePath = Server.MapPath(imgDir);
Bitmap bgImg = (Bitmap)Bitmap.FromFile(GetRandomFile(filePath));
Random newRandom = new Random();
// 圖高20px
Bitmap theBitmap = new Bitmap(width, height);
Graphics theGraphics = Graphics.FromImage(theBitmap);
theGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
theGraphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
theGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
theGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
// 白色背景
//theGraphics.Clear(Color.White);
theGraphics.DrawImage(bgImg, new Rectangle(0, 0, width, height), new Rectangle(0, 0, bgImg.Width, bgImg.Height), GraphicsUnit.Pixel);
// 灰色邊框
theGraphics.DrawRectangle(new Pen(Color.LightGray, 1), 0, 0, int_ImageWidth - 1, height - 1);
//13pt的字體
float fontSize = this.Height * 1.0f / 1.38f;
float fontSpace = fontSize / 7f;
Font theFont = new Font("Arial", fontSize);
System.Drawing.Drawing2D.GraphicsPath gp = null;
System.Drawing.Drawing2D.Matrix matrix;
for (int int_index = 0; int_index < str_ValidateCode.Length; int_index++)
{
string str_char = str_ValidateCode.Substring(int_index, 1);
Brush newBrush = new SolidBrush(GetRandomColor());
Point thePos = new Point((int)(int_index * (fontSize + fontSpace) + newRandom.Next(3)), 1 + newRandom.Next(3));
gp = new System.Drawing.Drawing2D.GraphicsPath();
gp.AddString(str_char, theFont.FontFamily, 0, fontSize, thePos, new StringFormat());
matrix = new System.Drawing.Drawing2D.Matrix();
int angle = GetRandomAngle();
PointF centerPoint = new PointF(thePos.X + fontSize / 2, thePos.Y + fontSize / 2);
matrix.RotateAt(angle, centerPoint);
theGraphics.Transform = matrix;
theGraphics.DrawPath(new Pen(Color.White, 2f), gp);
//theGraphics.FillPath(new SolidBrush(Color.Black), gp);
theGraphics.FillPath(new SolidBrush(GetRandomColor()), gp);
theGraphics.ResetTransform();
}
if (gp != null) gp.Dispose();
// 將生成的圖片發(fā)回客戶端
MemoryStream ms = new MemoryStream();
theBitmap.Save(ms, ImageFormat.Png);
Response.ClearContent(); //需要輸出圖象信息 要修改HTTP頭
Response.ContentType = "image/Png";
Response.BinaryWrite(ms.ToArray());
theGraphics.Dispose();
theBitmap.Dispose();
Response.End();
}
}
三、如何使用?
1、引用驗證碼圖形時：
<img src="ValidateCode.aspx?w=100&h=32" id="ValidateCodeAuto" width="100" height="32" align="absmiddle" /> <a href="#" onclick="Javascript:var now=new Date();var number = now.getSeconds(); document.getElementById('ValidateCodeAuto').src='ValidateCode.aspx?w=100&h=32&dd=' + number;">看不清楚</a>
2、驗證時，判斷用戶輸入驗證碼是否等于 Session["ValidateCode"] 即可。
3、其他說明：（1）上面有兩個參數(shù)w和h，是用來定義圖形驗證碼大小的。比如你想將你驗證碼設(shè)置為128*40時，你只需要ValidateCode.aspx?w=128&h=40，然后將圖片引用后面的Width,Height改成：width="128" height="40" 即可。對應(yīng)的，看不清楚的Javascript代碼也需要將src='ValidateCode.aspx?w=100&h=32改成：src='ValidateCode.aspx?w=128&h=40。
（2）“看不清楚”處還有一個參數(shù)dd，是用來做生成隨機(jī)值以便更新驗證碼圖片的。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
