请选择所有的![]()
@for (int i = 1; i < 5; i++)
{
@if (i % 2 == 1)
{
C#实现图像选择验证码
开发环境：C#，VS2019，.NET Core 3.1，ASP.NET Core
前几年使用12306购买火车票时使用过这种验证码，根据文字描述选择对应的图片，文字是随机的，图片也是随机的。
1、建立一个验证码控制器
新建两个方法Create和Check，Create用于创建验证码，Check用于验证它是否有效。
声明一个静态类变量存放列表，列表中存放包含令牌和验证码的对象。
///
/// 返回多张图片，一个文字和令牌.
///
///
/// 检查验证码是否有效
///
/// 令牌.
/// 验证码.
/// ();
if(_list.Find(m => m.id == id) == null)
{
result.code = "999999";
result.msg = "系统异常";
var json = JsonConvert.SerializeObject(result);
return json;
}
_list.Find(m => m.id == id).code.image.ForEach(m =>
{
// 复制数组，避免重复提交后仍然能获取到完整的数据
list_temp.Add(m);
});
var index = _list.FindIndex(m =>
{
var flag = false;
for (int i = 0; i < list_result.Count; i++)
{
var item = list_result[i];
flag = m.code.image.Exists(m => m.Equals(item));
if(flag == false)
{
// 选中了错误的
return false;
}
else
{
// 每次将选中的项删除，这样最终得到的数组应该是空的
list_temp.Remove(item);
}
}
if(list_temp.Count > 0)
{
// 未全部选中
return false;
}
if (m.id.Equals(id) && flag)
{
// 通过
return true;
}
return false;
});
if (index >= 0)
{
_list.RemoveAt(index);
result.code = "0";
result.msg = "验证成功";
var json = JsonConvert.SerializeObject(result);
return json;
}
else
{
result.code = "1";
result.msg = "验证失败";
var json = JsonConvert.SerializeObject(result);
return json;
}
}
catch (Exception ex)
{
_logger.LogError(exception: ex, message: ex.Message);
ReceiveObject result = new ReceiveObject();
result.code = "999999";
result.msg = "系统异常";
var json = JsonConvert.SerializeObject(result);
return json;
}
} 2、建立一个验证码模型
验证码模型类包括：令牌和验证码属性。
再创建一个类存放GetVCode方法返回的对象包括：图片的类型（它又叫文字描述）的图片，图片数组，图片对应的序号，该类型的图片对应的序号。
DrawImage方法生成图片的类型（它又叫文字描述）的图片
GetVCodeList方法生成图片数组，图片对应的序号，该类型的图片对应的序号。
BitmapToBase64Str方法用来将图片对象转成Base64字符串
///
/// 获取随机的文字和验证码.
///
///
/// 第一个参数 - 图片的类型（文字描述）
/// 第二个参数 - 图片数组，用来显示图片
/// 第三个参数 - 图片对应的序号
/// 第四个参数 - 该类型的图片对应的序号
///
public static Tuple, List, List> GetVCode()
{
Random random = new Random();
var type = random.Next(1, List_Text.Count + 1).ToString();
var typeName = List_Text.ElementAt(Convert.ToInt32(type) - 1);
var result = GetVCodeList(type);
return new Tuple, List, List>(typeName, result.Item1, result.Item2, result.Item3);
}
///
/// 获取随机的验证码.
///
/// 图片的类型.
///
/// 第一个参数 - 图片数组，用来显示图片
/// 第二个参数 - 图片对应的序号
/// 第三个参数 - 该类型的图片对应的序号
///
private static Tuple, List, List> GetVCodeList(string type)
{
// 这里的随机码是一个有四个元素的数组，如果发现没有生成指定类型的，就重新生成.
var list_files = Directory.GetFiles(PathHelper.Path + @"Images\imageSelect");
var count = list_files.Count();
List list_index = new List();
var list_fileName = new List();
List list_selectedIndex = new List();
Random random = new Random();
while (true)
{
while (true)
{
var index = random.Next(0, count).ToString();
if (list_index.Exists(m => m.Equals(index)) == false)
{
list_index.Add(index);
var temp = list_files.ElementAt(Convert.ToInt32(index)).Replace(PathHelper.Path + @"Images\imageSelect", ""); // 只保留文件名，去掉路径
list_fileName.Add(temp);
if(temp.Replace("\\img", "").Substring(0, 1) == type)
{
list_selectedIndex.Add(index);
}
}
if (list_index.Count >= 4)
{
break;
}
}
// 判断是否至少生成了一个指定类型的图片
var flag = false;
flag = list_fileName.Exists(m =>
{
if (m.Contains("img" + type))
{
return true;
}
return false;
});
if (flag == false)
{
list_index.Clear();
list_fileName.Clear();
list_selectedIndex.Clear();
continue;
}
else
{
// 至少生成了一个指定类型的图片
break;
}
}
// 加载图片
List list_image = new List();
for (int i = 0; i < list_fileName.Count; i++)
{
var image = Image.FromFile(string.Format(@"{0}Images\imageSelect\{1}", PathHelper.Path, list_fileName.ElementAt(i)));
list_image.Add((Bitmap)image);
}
return new Tuple, List, List>(list_image, list_index, list_selectedIndex);
}
///
/// 将图片对象转成Base64的字符串.
///
///
/// BitmapToBase64Str(List bitmap)
{
List list = new List();
for (int i = 0; i < bitmap.Count; i++)
{
using (MemoryStream memoryStream = new MemoryStream())
{
bitmap.ElementAt(i).Save(memoryStream, ImageFormat.Jpeg);
byte[] bytes = memoryStream.ToArray();
list.Add(Convert.ToBase64String(memoryStream.ToArray()));
}
}
return list;
}
///
/// 将图片对象转成Base64的字符串.
///
///
///
/// 绘制验证码的图片.
///
///
/// 3、新建一个视图文件，引入jquery，css文件，js方法中添加几个事件 - 点击图片，提交按钮。页面首次加载时调用控制器的Create方法获取图片和令牌。
![]()
}
else
{
![]()
}
}
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 300px;
background-color: white;
}
.img_check {
width: 100px;
height: 100px;
}
#div_icon1 {
bottom: 30px;
left: 70px;
}
#div_icon2 {
bottom: 56px;
left: 168px;
}
#div_icon3 {
bottom: 30px;
left: 70px;
}
#div_icon4 {
bottom: 56px;
left: 168px;
}
.divIconClass {
position: relative;
width: 25px;
height: 25px;
}
.imgIconClass {
width: 1px;
height: 1px;
left: 70px;
}
// 图片列表
var _imageBase64 = new Array();
// 文字描述的图片
var _imageText = new String();
// 令牌
var _id;
/**
* 设置当前图片
* @param {any} imageText 描述文字的图片
* @param {any} imageBase64 图片列表
* @param {any} img_index 图片的序号
*/
function setCurrentImageBase64(imageText, imageBase64, img_index)
{
// 显示描述文字
_imageText = 'data:image/webp;base64,' + imageText;
document.getElementById('backTextImage').src = _imageText;
// 显示图片
for (var i = 0; i < imageBase64.length; i++)
{
_imageBase64[i] = 'data:image/webp;base64,' + imageBase64[i];
document.getElementById('backImage' + (i + 1)).src = _imageBase64[i];
document.getElementById('backImage' + (i + 1)).attributes["val1"] = img_index[i];
}
}
/**
* 验证方法
* @param {any} code 验证码
*/
function check(code)
{
$.get("Check?code=" + code + "&id=" + _id, function (data) {
var obj = JSON.parse(data);
if (obj.code == "0") {
alert("验证成功");
}
else {
alert("验证失败");
}
location.reload();
});
}
window.onload = function () {
$.get("Create", function (data) {
// 获取图片和令牌
var obj = JSON.parse(data);
_id = obj.data.id;
// console.log(obj.data.img_index.length);
setCurrentImageBase64(obj.data.img_text, obj.data.img, obj.data.img_index);
});
// 点击图片
$(".img_check").click(function (event) {
var id = event.currentTarget.id;
var index = id.replace("backImage", "");
// console.log(event.currentTarget.attributes["val1"]);
if (event.currentTarget.attributes["checked"].value == "0")
{
// 选中状态
event.currentTarget.attributes["checked"].value = "1";
$("#imgIcon" + index).css("height", "25");
$("#imgIcon" + index).css("width", "25");
}
else
{
// 取消选中状态
event.currentTarget.attributes["checked"].value = "0";
$("#imgIcon" + index).css("height", "1");
$("#imgIcon" + index).css("width", "1");
}
});
// 提交按钮
$("#button_submit").click(function () {
var result = "";
var v1 = $("#backImage1");
var v2 = $("#backImage2");
var v3 = $("#backImage3");
var v4 = $("#backImage4");
if (v1[0].attributes["checked"].value == "1") {
var code = v1[0].attributes["val1"];
result = result + code + ","
}
if (v2[0].attributes["checked"].value == "1") {
var code = v2[0].attributes["val1"];
result = result + code + ","
}
if (v3[0].attributes["checked"].value == "1") {
var code = v3[0].attributes["val1"];
result = result + code + ","
}
if (v4[0].attributes["checked"].value == "1") {
var code = v4[0].attributes["val1"];
result = result + code + ","
}
if (result.length <= 0) {
alert("请选择图片");
return;
}
else {
result = result.substring(0, result.length - 1);
}
check(result);
})
}效果图：
