C#实现旋转图片验证码

news2024/7/4 4:37:37

开发环境：C#，VS2019，.NET Core 3.1，ASP.NET Core

1、建立一个验证码控制器

新建两个方法Create和Check，Create用于创建验证码（返回1张图片和令牌），Check用于验证（验证图片旋转角度）它是否有效。

声明一个静态类变量存放列表，列表中存放包含令牌和验证码的对象。

        /// <summary>
        /// 返回一张图片和令牌.
        /// </summary>
        /// <returns></returns>
        public string Create()
        {
            try
            {
                // 记录验证码到缓存中
                VCodeCircleModel model = new VCodeCircleModel();
                model.id = Guid.NewGuid().ToString();    // 生成令牌
                var vcode = VCodeCircleModel.GetVCode();    // 生成验证码
                model.code = vcode;
                _list.Add(model);

                // 返回图片
                var images = VCodeCircleModel.GetImage(Convert.ToInt32(vcode));
                VCodeCircleController_Create_Receive result = new VCodeCircleController_Create_Receive();
                result.code = "0";
                result.data.id = model.id;
                result.data.img = VCodeCircleModel.BitmapToBase64Str(images);
                var json = JsonConvert.SerializeObject(result);
                return json;
            }
            catch (Exception ex)
            {
                _logger.LogWarning(exception: ex, message: ex.Message);
                VCodeCircleController_Create_Receive result = new VCodeCircleController_Create_Receive();
                result.code = "999999";
                result.msg = "系统异常";
                var json = JsonConvert.SerializeObject(result);
                return json;
            }
        }


        public string Check(string id, string code)
        {
            try
            {
                // 旋转图片的误差在±5
                var temp = Convert.ToInt32(code) - 5;
                var index = _list.FindIndex(m =>
                {
                    if (m.id.Equals(id))
                    {
                        for (int i = 0; i < 10; i++)
                        {
                            if (m.code.Equals(temp.ToString()))
                            {
                                return true;
                            }

                            temp++;
                        }
                    }

                    return false;
                });

                ReceiveObject result = new ReceiveObject();
                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;
            }
        }

    public class VCodeCircleModel
    {
        /// <summary>
        /// 令牌.
        /// </summary>
        public string id { get; set; }

        /// <summary>
        ///验证码.
        /// </summary>
        public string code { get; set; }

        /// <summary>
        /// 获取随机验证码.
        /// </summary>
        /// <returns></returns>
        public static string GetVCode()
        {
            // 这里的随机码是旋转图片的角度，至少旋转60度，最多旋转300度
            Random random = new Random();
            return random.Next(60, 300).ToString();
        }

        /// <summary>
        /// 随机获取一张图片.
        /// </summary>
        /// <returns></returns>
        public static Bitmap GetImage(int angle)
        {
            // 从文件加载原图
            Random random = new Random();
            var image_index = random.Next(0, 2);
            Image originImage;
            switch (image_index)
            {
                case 0:
                    originImage = Image.FromFile(string.Format(@"{0}\Images\{1}", PathHelper.Path, "circleImg1.png"));
                    break;

                case 1:
                default:
                    originImage = Image.FromFile(string.Format(@"{0}\Images\{1}", PathHelper.Path, "circleImg2.png"));
                    break;
            }

            originImage = Rotate(originImage as Bitmap, angle);
            return (Bitmap)originImage;
        }

        /// <summary>
        /// 图片旋转
        /// </summary>
        /// <param name="ImageOriginal">原图.</param>
        /// <param name="AngleValue">旋转角度.</param>
        /// <returns></returns>
        public static Bitmap Rotate(Bitmap ImageOriginal, float AngleValue)
        {
            AngleValue = AngleValue % 360;
            double radian = AngleValue * Math.PI / 180.0;
            double cos = Math.Cos(radian);
            double sin = Math.Sin(radian);
            int w = ImageOriginal.Width;
            int h = ImageOriginal.Height;
            int W = (int)(Math.Max(Math.Abs(w * cos - h * sin), Math.Abs(w * cos + h * sin)));
            int H = (int)(Math.Max(Math.Abs(w * sin - h * cos), Math.Abs(w * sin + h * cos)));
            Bitmap ImageBaseOriginal = new Bitmap(W, H, PixelFormat.Format32bppArgb);
            System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(ImageBaseOriginal);
            g.InterpolationMode = InterpolationMode.NearestNeighbor;
            g.SmoothingMode = SmoothingMode.HighQuality;
            Point Offset = new Point((W - w) / 2, (H - h) / 2);
            Rectangle rect = new Rectangle(Offset.X, Offset.Y, w, h);
            Point center = new Point(rect.X + rect.Width / 2, rect.Y + rect.Height / 2);
            g.Clear(Color.White);
            g.TranslateTransform(center.X, center.Y);
            g.RotateTransform(360 - AngleValue);
            g.TranslateTransform(-center.X, -center.Y);
            g.DrawImage(ImageOriginal, rect);
            g.ResetTransform();
            g.Save();
            g.Dispose();
            return ImageBaseOriginal;
        }

        /// <summary>
        /// 将图片对象转成Base64的字符串.
        /// </summary>
        /// <param name="bitmap"></param>
        /// <returns></returns>
        public static string BitmapToBase64Str(Bitmap bitmap)
        {
            using (MemoryStream memoryStream = new MemoryStream())
            {
                bitmap.Save(memoryStream, ImageFormat.Jpeg);
                byte[] bytes = memoryStream.ToArray();
                return Convert.ToBase64String(memoryStream.ToArray());
            }
        }
    }

2、新建一个视图文件，引入jquery，css文件，js方法中添加三个鼠标事件 - 鼠标按下，鼠标移动和鼠标松开。页面首次加载时调用控制器的Create方法获取图片和令牌，在鼠标松开时调用Check方法验证旋转的角度是否有效。

本来想实现鼠标在图片上拖动后让图片的效果，但发现难度有点大，就换成了拖动滑块后让图片旋转的形式。

<link href="~/css/circle_slide.css" rel="stylesheet" type="text/css" />

<!-- 展示验证码 -->
<div class="container">
    <div class="main">
        <div id="content" class="content">
            <img id="backImage" src="" alt="">
        </div>
    </div>
    <div id="slider">
        <div id="sliderBlock"></div>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/MyCircleSlide.js"></script>

* {
    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);
        });
    }
});

效果图：