C#实现旋转图片验证码
开发环境：C#，VS2019，.NET Core 3.1，ASP.NET Core
1、建立一个验证码控制器
新建两个方法Create和Check，Create用于创建验证码（返回1张图片和令牌），Check用于验证（验证图片旋转角度）它是否有效。
声明一个静态类变量存放列表，列表中存放包含令牌和验证码的对象。
///
/// 返回一张图片和令牌.
///
/// public class VCodeCircleModel
{
///
/// 令牌.
///
public string id { get; set; }
///
///验证码.
///
public string code { get; set; }
///
/// 获取随机验证码.
///
///
/// 随机获取一张图片.
///
///
/// 图片旋转
///
/// 原图.
/// 旋转角度.
///
/// 将图片对象转成Base64的字符串.
///
///
/// 2、新建一个视图文件，引入jquery，css文件，js方法中添加三个鼠标事件 - 鼠标按下，鼠标移动和鼠标松开。页面首次加载时调用控制器的Create方法获取图片和令牌，在鼠标松开时调用Check方法验证旋转的角度是否有效。
本来想实现鼠标在图片上拖动后让图片的效果，但发现难度有点大，就换成了拖动滑块后让图片旋转的形式。
![]()
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
background-color: white;
}
.content {
width: 100%;
}
.content img {
width: 100%;
height: auto;
}
#slider {
width: 85%;
height: 40px;
background-color: aliceblue;
position: relative;
}
#sliderBlock {
position: absolute;
left: 5px;
height: 30px;
width: 45px;
top: 5px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px 2px lightgray;
}$(function () {
var _imageBase64; // 大图
var _id;
// 鼠标左键是否按下
var isMouseDown;
// 鼠标按下x值
var mouseDownStartX;
// 鼠标移动距离
var mouseMoveLength;
init();
document.onmousedown = function (event) {
var obj = getElementPosition(document.getElementById('sliderBlock'))
if (event.clientX > obj.left &&
event.clientX < (obj.left + obj.width) &&
event.clientY > obj.top &&
event.clientY < (obj.top + obj.height)) {
// 鼠标点击事件发生在滑动条的范围内
this.isMouseDown = true
this.mouseDownStartX = event.clientX
console.log("鼠标点击事件发生在滑动条的范围内");
}
}
document.onmousemove = function (event) {
if (this.isMouseDown) {
this.mouseMoveLength = event.clientX - this.mouseDownStartX; // 计算滑块拖动的距离
if (this.mouseMoveLength > 0 &&
this.mouseMoveLength < 360) {
// 滑块拖动的最小距离是5px，最大距离是大图的宽度 - 小图的宽度
document.getElementById('sliderBlock').style.left = 5 + this.mouseMoveLength + 'px'
$("#backImage").css("transform", "rotate(" + (this.mouseMoveLength) + "deg)");
}
}
}
document.onmouseup = function (event) {
// 鼠标松开后停止拖动
if (this.isMouseDown) {
this.isMouseDown = false
// console.log("小图移动了：" + this.mouseMoveLength);
// check(x.replace("px", ""));
check(this.mouseMoveLength);
}
}
// dom在浏览器的位置
function getElementPosition(element) {
let top = element.offsetTop
let left = element.offsetLeft
let width = element.offsetWidth
let height = element.offsetHeight
var currentParent = element.offsetParent;
while (currentParent !== null) {
top += currentParent.offsetTop
left += currentParent.offsetLeft
currentParent = currentParent.offsetParent
}
return { top, left, width, height }
}
function check(x) {
$.get("Check?code=" + x + "&id=" + _id, function (data) {
var obj = JSON.parse(data);
if (obj.code == "0") {
alert("验证成功");
}
else {
alert("验证失败");
}
});
}
// 设置当前图片
function setCurrentImageBase64(imageBase64) {
_imageBase64 = imageBase64
document.getElementById('backImage').src = _imageBase64
}
function init() {
$.get("Create", function (data) {
// 获取两张图片和令牌
var obj = JSON.parse(data);
_id = obj.data.id;
setCurrentImageBase64('data:image/webp;base64,' + obj.data.img);
});
}
});效果图：
