我们可以通过在后台生成画布,然后增加干扰线,生成随机验证码的形式来生成图形验证码。通过内存流的形式来进行传输。
一、首先新建一个类用来存放方法我这里叫做VerifyCodeHelper
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Text;
namespace Common.VerifyCode
{
public class VerifyCodeHelper
{
/// <summary>
/// 生成图形验证码私有类
/// </summary>
/// <returns></returns>
public static byte[] GetVerifyCode(out string chkCode)
{
int codeW = 80;
int codeH = 30;
int fontSize = 16;//字体大小
chkCode = string.Empty;
//颜色
Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.DarkBlue }; //字体颜色、、
//字体
string[] font = { "Times New Roman" };
char[] character = { '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
//生成验证码字符串
Random rnd = new Random();
for (int i = 0; i < 4; i++)
{
chkCode += character[rnd.Next(character.Length)];
}
//创建画布
Bitmap bmp = new Bitmap(codeW, codeH - 3);
Graphics g = Graphics.FromImage(bmp);
g.Clear(Color.White);
//画噪线
for (int i = 0; i < 3; i++)
{
int x1 = rnd.Next(codeW);
int y1 = rnd.Next(codeH);
int x2 = rnd.Next(codeW);
int y2 = rnd.Next(codeH);
Color clr = color[rnd.Next(color.Length)];
g.DrawLine(new Pen(clr), x1, y1, x2, y2);
}
//画验证码
for (int i = 0; i < chkCode.Length; i++)
{
string fnt = font[rnd.Next(font.Length)];
Font ft = new Font(fnt, fontSize);
Color clr = color[rnd.Next(color.Length)];
g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18, (float)0);
}
//将验证码写入图片内存流中,以image/png格式输出
MemoryStream ms = new MemoryStream();
try
{
//格式
bmp.Save(ms, ImageFormat.Png);
return ms.ToArray();
}
catch (Exception ex)
{
return null;
}
finally
{
//释放对象
g.Dispose();
bmp.Dispose();
ms.Dispose();
}
}
}
}
这样他在前台会给我们返回一个内存流的一串字符串,我们接下来需要前台调用这个方法,调用的时候我们需要转化一下格式,前台的调用方法是这样的;
< a href=" ">~/lib/jquery/dist/jquery.min.map</ a>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
账号:
<input type="text" />
密码:
<input type="text" />
<!-- img标签中src属性值"Code"是生成验证码图形Servlet的名称 -->
<p>
验证码<input type="text" id="yzm" name="yzm" />< img src="" id="code" />
< a href="javascript:void(0)" onclick="btn()" id="a">看不清?换一张</ a>
</p >
<button onclick="">登录</button>
<script>
<!-- 页面完全加载后执行事件 -->
window.onload=btn();
function btn() {
$.ajax({
type: 'post',
url: '/Login/Code',
success: function (data) {
console.log(data);
<!-- 获取后台内存流文件后转化内格式 -->
$("#code").attr("src", "data:image/png;base64," + data);
}
})
}
</script>
内部调用的话,可以把生成的验证码在后台进行存储,如果在控制器内可以使用ViewBag或者其他的来进行存储。