您的位置：首页 > Web前端 > HTML

html验证码

2016-06-29 15:11 274 查看

一、原理

　　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="width: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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航