最近，工作中接到一項任務，開發一個頁面驗證碼功能，查閱了一些網上的資料，並結合以前的繪圖方面的知識，實現瞭如下的解決方案。產生的驗證碼效果如圖：
要解決的問題：
1. 如何隨機產生圖片
產生System.Drawing.Bitmap對象，使用System.Drawing.Graphics向點陣圖對像中繪圖。
2. 如何在WebService的方法中透過參數傳遞圖片資料
將Bitmap物件輸出成位元組流，WebMothod使用位元組陣列傳回該位元組流。
實例：
1. 用VS.NET 2003建立一個ASP.NET Webservice工程，預設的Service名為MyService，為MyService新增一個名為GenerateVerifyImage的WebMethod。方法的程式碼如下：
/// <summary>
/// 產生圖片驗證碼
/// </summary>
/// <param name="nLen">驗證碼的長度</param>
/// <param name="strKey">輸出參數，驗證碼的內容</param>
/// <returns>圖片位元組流</returns>
[WebMethod]
public byte[] GenerateVerifyImage(int nLen,ref string strKey)
{
int nBmpWidth = 13*nLen+5;
int nBmpHeight = 25;
System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(nBmpWidth,nBmpHeight);
// 1. 產生隨機背景色
int nRed,nGreen,nBlue; // 背景的三元色
System.Random rd = new Random((int)System.DateTime.Now.Ticks);
nRed = rd.Next(255)%128+128;
nGreen = rd.Next(255)%128+128;
nBlue = rd.Next(255)%128+128;
// 2. 填滿點陣圖背景
System.Drawing.Graphics graph = System.Drawing.Graphics.FromImage(bmp);
graph.FillRectangle(new SolidBrush(System.Drawing.Color.FromArgb(nRed,nGreen,nBlue))
,0
,0
,nBmpWidth
,nBmpHeight);
// 3. 繪製幹擾線條，採用比背景略深一些的顏色
int nLines = 3;
System.Drawing.Pen pen = new System.Drawing.Pen(System.Drawing.Color.FromArgb(nRed-17,nGreen-17,nBlue-17),2);
for(int a =0;a< nLines;a++)
{
int x1 = rd.Next() % nBmpWidth;
int y1 = rd.Next() % nBmpHeight;
int x2 = rd.Next() % nBmpWidth;
int y2 = rd.Next() % nBmpHeight;
graph.DrawLine(pen,x1,y1,x2,y2);
}
// 採用的字元集，可以隨即拓展，並且可以控製字元出現的幾率
string strCode = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 4. 循環取得字符，並繪製
string strResult = "";
for(int i=0;i<nLen;i++)
{
int x = (i*13 + rd.Next(3));
int y = rd.Next(4) + 1;
// 確定字體
System.Drawing.Font font = new System.Drawing.Font("Courier New",
12 + rd.Next()%4,
System.Drawing.FontStyle.Bold);
char c = strCode[rd.Next(strCode.Length)]; // 隨機取得字符
strResult += c.ToString();
// 繪製字符
graph.DrawString(c.ToString(),
font,
new SolidBrush(System.Drawing.Color.FromArgb(nRed-60+y*3,nGreen-60+y*3,nBlue-40+y*3)),
x,
y);
}
// 5. 輸出位元組流
System.IO.MemoryStream bstream = new System.IO.MemoryStream();
bmp.Save(bstream,System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();
graph.Dispose();
strKey = strResult;
byte[] byteReturn = bstream.ToArray();
bstream.Close();
return byteReturn;
}
2. 測試WebMethod，新增一個WebForm，引用上述WebService，引用名為imagesvr。在Page_Load中加入程式碼：
...
imagesvr.MyService imgsvr = new imagesvr.MyService();
string strKey = "";
byte[] data = imgsvr.GenerateVerifyImage(5,ref strKey);
Response.OutputStream.Write(data,0,data.Length);
....
3. 運行。每次refresh這個WebForm時，就會顯示一個新產生的圖片驗證碼，而函數的輸出參數strKey保存的就是這個驗證碼的實際內容，可以保存在Session中，作為驗證使用。
上次開發出圖片驗證碼之後，根據一些朋友的建議，本著驗證碼易識別（針對人），不易破解，美觀的原則，改進了驗證碼生成的算法，採用圖像濾鏡的方法，對圖片驗證碼進行反破解幹擾，結果圖片範例如下： 
濾鏡效果主要採用波形（wave）演算法，透過對X軸Y軸的正弦波波形處理，產生疊加效果。演算法主要描述如下：
private const double PI = 3.1415926535897932384626433832795;
private const double PI2 = 6.283185307179586476925286766559;
/// <summary>
/// 正弦曲線Wave扭曲圖片
/// </summary>
/// <param name="srcBmp"></param>
/// <param name="bXDir"></param>
/// <param name="nMultValue">波形的幅度倍數</param>
/// <param name="dPhase">波形的起始相位，取值區間[0-2*PI)</param>
/// <returns></returns>
public System.Drawing.Bitmap TwistImage(Bitmap srcBmp,bool bXDir,double dMultValue,double dPhase)
{
System.Drawing.Bitmap destBmp = new Bitmap(srcBmp.Width,srcBmp.Height);
// 將點陣圖背景填入白色
System.Drawing.Graphics graph = System.Drawing.Graphics.FromImage(destBmp);
graph.FillRectangle(new SolidBrush(System.Drawing.Color.White),0,0,destBmp.Width,destBmp.Height);
graph.Dispose();
double dBaseAxisLen = bXDir ? (double)destBmp.Height : (double)destBmp.Width;
for(int i=0;i<destBmp.Width;i++)
{
for(int j=0;j<destBmp.Height;j++)
{
double dx = 0;
dx = bXDir ? (PI2*(double)j)/dBaseAxisLen : (PI2*(double)i)/dBaseAxisLen;
dx += dPhase;
double dy = Math.Sin(dx);
// 取得目前點的顏色
int nOldX = 0,nOldY = 0;
nOldX = bXDir ? i + (int)(dy*dMultValue) : i;
nOldY = bXDir ? j : j + (int)(dy*dMultValue);
System.Drawing.Color color = srcBmp.GetPixel(i,j);
if(nOldX >= 0 && nOldX < destBmp.Width
&& nOldY >=0 && nOldY < destBmp.Height)
{
destBmp.SetPixel(nOldX,nOldY,color);
}
}
}
return destBmp;
}
開頭的範例圖片，是兩次波形效果的疊加，兩次效果分別針對X軸方向和Y軸方向，如果取消對邊緣背景色的填充，可以看到演算法對圖形的影響，如下圖： 
這樣產生的驗證碼，看起來很像Google網站上的驗證碼吧，當然，如果你有興趣，還可以添加其他的濾鏡效果，如拉伸，旋轉，馬賽克等。但要注意一點，網站驗證碼不是越複雜越好，要在速度和安全上找到一個平衡點。