在mvc 出现之前 生成验证码思路
在一个html页面上,生成一个验证码,在把这个页面嵌入到需要验证码的页面中。
JS生成验证码
<script type="text/javascript">
jQuery(function ($) {
/**生成一个随机数**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
var code = drawPic();
document.getElementById("changeImg").onclick = function (e) {
e.preventDefault();
code = drawPic();
}
/**绘制验证码图片**/
function drawPic() {
var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
//获取该canvas的2D绘图环境
var ctx = canvas.getContext('2d');
ctx.textBaseline = 'bottom';
/**绘制背景色**/
ctx.fillStyle = randomColor(180, 240);
//颜色若太深可能导致看不清
ctx.fillRect(0, 0, width, height);
/**绘制文字**/
var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
var code = "";
//生成四个验证码
for (var i = 1; i <= 4; i++) {
var txt = str[randomNum(0, str.length)];
code = code + txt;
ctx.fillStyle = randomColor(50, 160);
//随机生成字体颜色
ctx.font = randomNum(15, 40) + 'px SimHei';
//随机生成字体大小
var x = 10 + i * 25;
var y = randomNum(25, 35);
var deg = randomNum(-45, 45);
//修改坐标原点和旋转角度
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
//恢复坐标原点和旋转角度
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**绘制干扰线**/
for (var i = 0; i < 3; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2));
ctx.lineTo(randomNum(0, width / 2), randomNum(0, height));
ctx.stroke();
}
/**绘制干扰点**/
for (var i = 0; i < 50; i++) {
ctx.fillStyle = randomColor(255);
ctx.beginPath();
ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
ctx.fill();
}
$("#code").val(code);
return code;
}
});
</script>
MVC中验证码
》》》定义一个生成验证码的类
public class VerifyCodeHelper
{
public static Bitmap CreateVerifyCode(out string code)
{
//建立Bitmap对象,绘图
Bitmap bitmap = new Bitmap(200, 60);
Graphics graph = Graphics.FromImage(bitmap);
graph.FillRectangle(new SolidBrush(Color.White), 0, 0, 200, 60);
Font font = new Font(FontFamily.GenericSerif, 48, FontStyle.Bold, GraphicsUnit.Pixel);
Random r = new Random();
string letters = "ABCDEFGHIJKLMNPQRSTUVWXYZ0123456789";
StringBuilder sb = new StringBuilder();
//添加随机的五个字母
for (int x = 0; x < 5; x++)
{
string letter = letters.Substring(r.Next(0, letters.Length - 1), 1);
sb.Append(letter);
graph.DrawString(letter, font, new SolidBrush(Color.Black), x * 38, r.Next(0, 15));
}
code = sb.ToString();
//混淆背景
Pen linePen = new Pen(new SolidBrush(Color.Black), 2);
for (int x = 0; x < 6; x++)
graph.DrawLine(linePen, new Point(r.Next(0, 199), r.Next(0, 59)), new Point(r.Next(0, 199), r.Next(0, 59)));
return bitmap;
}
}
》》》》Action
/// <summary>
/// 验证码 FileContentResult
/// </summary>
/// <returns></returns>
[AllowAnonymous]
public ActionResult VerifyCode()
{
string code = "";
Bitmap bitmap = VerifyCodeHelper.CreateVerifyCode(out code);
//声明一个内存流
MemoryStream stream = new MemoryStream();
//把bitmap存入这个 流中
bitmap.Save(stream, ImageFormat.Gif);
// Controller中File方法 返回 FileContentResult,
// FileContentResult继承FileResult,FileResult又继承 ActionResult
return File(stream.ToArray(), "image/gif");//返回FileContentResult图片
}
/// <summary>
/// 验证码 直接写入Response
/// </summary>
[AllowAnonymous]
public void Verify()
{
string code = "";
Bitmap bitmap = VerifyCodeHelper.CreateVerifyCode(out code);
bitmap.Save(base.Response.OutputStream, ImageFormat.Gif);
base.Response.ContentType = "image/gif";
}
在html页面中