网站首页 网站导航 课程中心
新闻中心
您所在的位置:.net培训 > 新闻中心 > .NET点选验证码实现思路分享(三)

.NET点选验证码实现思路分享(三)

来源:中软卓越 日期:2017-02-05 15:55 人气:

.NET点选验证码实现思路分享(一)

.NET点选验证码实现思路分享(二)

五、绘制图片

下面是画图的代码,验证码和备选答案对应两种不同的画法(里面注释写的还算清楚)。不要担心文字旋转x°后人类分不出来,哈哈。代码最后一句我把图片转成了Base64,方便前端调用。

private static string GetImage(string text)

{

Image image;

switch (text.Length)

{

case 1:

image = new Bitmap(50, 40);

break;

case 4:

image = new Bitmap(120, 40);

break;

default:

image = new Bitmap(50, 40);

break;

}

Brush brushText = new SolidBrush(Color.FromArgb(255, 0, 0, 0));

var graphics = Graphics.FromImage(image);

graphics.SmoothingMode = SmoothingMode.AntiAlias;

graphics.Clear(Color.White);

var font = new Font(new FontFamily("华文彩云"), 20, FontStyle.Regular);

if (text.Length > 1)//画验证码

{

//先来两条直线做干扰 然后再画文字

graphics.DrawLine(new Pen(brushText, new Random().Next(1, 3)), new Point(new Random().Next(0, 10), new Random().Next(10, 40)), new Point(new Random().Next(100, 120), new Random().Next(10, 30)));

graphics.DrawLine(new Pen(brushText, new Random().Next(1, 3)), new Point(new Random().Next(20, 50), new Random().Next(0, 10)), new Point(new Random().Next(100, 120), new Random().Next(30, 40)));

graphics.DrawString(text, font, brushText, 0, 10);

}

else//画备选答案

{

Point middle = new Point(25, 20);

graphics.TranslateTransform(middle.X, middle.Y);

//这里是360°随机旋转

graphics.RotateTransform(new Random().Next(0, 360));

var format = new StringFormat(StringFormatFlags.NoClip)

{

Alignment = StringAlignment.Center,

LineAlignment = StringAlignment.Center

};

graphics.DrawString(text, font, brushText, 0, 0, format);

}

brushText.Dispose();

graphics.Dispose();

return ImageToBase64(image);

}

六、显示

直接调用GetCode方法就能返回验证码对象

下面是后台代码,应为正确答案是放在AnswerValue里的所以我先把取出来放Session里面,然后把值清空后再通过json返回给浏览器。

public string GetVerCode()

{

var code = new VerificationCode.Code().GetCode();

Session["VERCODE"] = code.AnswerValue;

code.AnswerValue = "";

return JsonConvert.SerializeObject(code);

}

现在来堆点html代码

<div class="form-group">

                    <ul class="vercode">

                        <li><img src=''/></li>

                        <li><img src=''/></li>

                        <li><img src=''/></li>

                        <li><img src=''/></li>

                        <li class="delete" onclick="delete_input()"></li>

                    </ul>

<div>

<img id="code-image"/> <a href="javascript:void(0);" onclick="load_vercode()">看不清?</a>

                    </div>

                    <ul class="vercode-anwser">

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                        <li><img /></li>

                </ul>

</div>

再来点js代码,这里只实现的图片上的效果,还没对数据验证(这里说说验证思路:每个图片对应一个ID,取到选择图片的ID用逗号分隔,然后与Session里的值对比)

营业执照 版权所有©Copyright 2008-2017,北京中软国际教育科技股份有限公司, All Rights Reserved. ICP备案号:京ICP备14058756号-2

| | 分类导航 | 关于我们