c# 简单的滑动图片验证

本文介绍了一种基于滑动图片的验证码实现方式,用户通过拖动滑块完成图片拼接验证。主要内容包括:从图片库中随机选取图片,对图片进行切割处理,并记录切割位置;客户端显示原图和滑块,用户完成拼接后发送坐标到服务器进行比对。

普通的验证码对用户使用体验不友好,出现了滑动图片验证的验证方式,用户只要按住滑块完成图片的拼接即可通过验证(这是最简单的方式,滑动轨迹,数据分析,滑行速度 什么的暂没考虑)

主要的实现思路:

1.先从一批图片中随机抽取一张图片

2.在服务器端,在该图片的一个随机点上对图片进行切图处理,形状可以是 矩形 圆  不规则图形 等

3.记录下切图左上角点的坐标 并保持

4.将切过的 大图,小图,原图 都返回到客户端 

5. 页面起初显示原图片,滑块显示切下的小图,当用户鼠标按下是显示切过的大图, 用户通过页面滑块对切图进行拼接,当用户松开鼠标时获取小图左上角坐标,并通过ajax传回到服务器

6.服务器获取到用户滑块的坐标后与保存的切图左上角坐标进行对比,如果在容差范围内表示验证通过否则验证失败

 

https://files.cnblogs.com/files/yaoweijun/SlidingCaptcha%EF%BC%88%E5%9B%BE%E7%89%87%E6%BB%91%E5%8A%A8%E9%AA%8C%E8%AF%81%E7%A0%81%EF%BC%89.zip

 

转载于:https://www.cnblogs.com/yaoweijun/p/9521823.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值