html验证码

一、原理

　　1.在webservice服务端，新建一个Bitmap对象，将验证码字符串、干扰线和干扰点绘制到此Bitmap上——>转换为字节数组——>Base64字符串

　　2.<img src="data:image/jpeg;base64,此处base64字符串"/>

二、生成验证码图片字节数据　　

  public byte[] CreateValidateGraphic(string validateCode)
        {
            var image = new Bitmap((int)Math.Ceiling(validateCode.Length * 12.0), 22);
            var g = Graphics.FromImage(image);
            try
            {
                //生成随机生成器
                var random = new Random();
                //清空图片背景色
                g.Clear(Color.White);
                //画图片的干扰线
                for (int i = 0; i < 25; i++)
                {
                    var x1 = random.Next(image.Width);
                    var x2 = random.Next(image.Width);
                    var y1 = random.Next(image.Height);
                    var y2 = random.Next(image.Height);
                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
                }
                //Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));
                string[] fontName = { "华文新魏", "宋体", "圆体", "黑体", "隶书" };
                var font = new Font(fontName[new Random().Next(0, validateCode.Length)], 12, (FontStyle.Bold | FontStyle.Italic));
                var brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),
                Color.Blue, Color.DarkRed, 1.2f, true);
                g.DrawString(validateCode, font, brush, 3, 2);
                //画图片的前景干扰点
                for (var i = 0; i < 100; i++)
                {
                    var x = random.Next(image.Width);
                    var y = random.Next(image.Height);
                    image.SetPixel(x, y, Color.FromArgb(random.Next()));
                }
                //画图片的边框线
                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
                //保存图片数据
                var stream = new MemoryStream();
                image.Save(stream, ImageFormat.Jpeg);
                //输出图片流
                return stream.ToArray();
            }
            finally
            {
                g.Dispose();
                image.Dispose();
            }
        }

三、字节转base64

Convert.ToBase64String(CreateValidateGraphic("123T"));

四、在html标签<img/>中显示baser64字符串表示的图片

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VerificationCodePage.aspx.cs" Inherits="VerificationCode.Pages.VerificationCodePage" %>
<!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>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
    <div>
     <img  id="verification" src="" style="200px;height:100px;" />
    </div>
    <script type="text/javascript">            
        var CreatVerificationCode = function () {
            var number = Math.floor(Math.random() * 8999) + 1000;
            $.ajax({
                type: "post",
                url: "../WebService/VerificationCodeWebService.asmx/GetValidateCode",
                data: '{ number: ' + number + '}',
                dataType: "json",
                contentType: "application/json;charset=utf8",
                success: function (data) {
                    $("#verification").attr("src", "data:image/jpeg;base64," + data.d);
                },
                error: function (data) {
                    alert(data);
                }
            });
        }
        $("#verification").click(CreatVerificationCode);
        CreatVerificationCode();        
    </script>
</body>
</html>

工程VerificationCode验证码.rar下载地址：链接: http://pan.baidu.com/s/1i5lmYGX 密码: unjr