目录

• 使用背景：
• 实现分析：
• 后端代码：
• 准备：
• 使用：
• 前端代码：
• 结语：

使用背景： 关于滑动验证码的使用场所还是非常多的，如：调取短信接口之前，和 注册请求之前 或者 频繁会调用的接口都需要加这个拼图验证。这里先上一下效果图吧（心中无码，自然高清）。
话不多说，开撸！

文章图片


文章图片


实现分析： 滑动验证码的逻辑也很简单。大概说一下：
1，服务器生成主图+附图（从主图裁剪下来的不需要管y坐标）并且存储X坐标；
2，前端传入本地X坐标到服务器。
3，服务器进行计算存储X坐标和本地X坐标相差值；
4，验证相差值是否在 0-2 之间，判断 true | false

后端代码：
准备：
增加SlideCaptcha文件夹，并且增加Captcha.cs CaptchaModel.cs Config.cs ImgFormat.cs 4个文件。分别是：验证，验证实体，配置和图片生成类。代码如下：
Captcha.cs

using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.IO; using System.Net; namespace SliderCaptcha.NET{public class Captcha{public static Captcha64Model GenerateBase64(){CaptchaModel model = Captcha.Generate(); if (model != null){return new Captcha64Model(){X = model.X,Y = model.Y,Background = ImageToBase64(model.Background,ImageFormat.Jpeg),Slide = ImageToBase64(model.Slide, ImageFormat.Png)}; }else{return null; }}/// /// 生成验证码/// /// public static CaptchaModel Generate(){Bitmap image = BgImage(); if (image != null){int l = Config.l; int d = Config.d; int width = image.Width; int height = image.Height; int x = RandomNext(width / 3, width - d - l - 10); //初始xint y = RandomNext(10 + d, height - l - 10); ; //初始yGraphicsPath path = GetSliderPath(x, y); Graphics g = GetGraphics(image); //水印if (Config.showWatermark){Font font = new Font("宋体", 12, FontStyle.Bold); SizeF size = g.MeasureString(Config.watermarkText, font); Point Plogo = new Point((int)(width - size.Width - 5), (int)(height - size.Height - 5)); Color color = image.GetPixel(Plogo.X, Plogo.Y); SolidBrush bru = new SolidBrush(AntiColor(color)); g.DrawString(Config.watermarkText, font, bru, Plogo); }Pen pen = new Pen(Color.FromArgb(200, 255, 255, 255), 2); g.DrawPath(pen, path); Image slider = CaptureSlider(image, path, x, width, height); SolidBrush brush = new SolidBrush(Color.FromArgb(100, 255, 255, 255)); g.FillPath(brush, path); g.Save(); g.Dispose(); return new CaptchaModel(){X = x,Y = y,Background = image,Slide = slider}; }return null; }/// /// 获取图片Graphics/// /// /// private static Graphics GetGraphics(Image image){Graphics g = Graphics.FromImage(image); g.SmoothingMode = SmoothingMode.HighQuality; g.CompositingQuality = CompositingQuality.HighQuality; g.InterpolationMode = InterpolationMode.High; return g; }/// /// 获取滑块path/// private static GraphicsPath GetSliderPath(int x, int y){int l = Config.l; int r = Config.r; int b = Config.b; int c = Config.c; int d = Config.d; int blod = Config.blod; GraphicsPath path = new GraphicsPath(FillMode.Winding); Point Pa = new Point(x, y); Point Pb = new Point(x + l / 2 - b, y - c + blod); Point Pd = new Point(x + l, y); Point Pe = new Point(Pd.X + c - blod, y + l / 2 - b); Point Pg = new Point(Pd.X, y + l); Point Ph = new Point(x, y + l); Point Pj = new Point(x + c - blod, Pe.Y); path.AddLine(Pa, Pb); path.AddArc(x + l / 2 - r, y - d, d, d, 130f, 280f); path.AddLines(new Point[] { Pd, Pe }); path.AddArc(x + l, y + l / 2 - r, d, d, 220f, 280f); path.AddLines(new Point[] { Pg, Ph }); path.AddArc(x, y + l / 2 - r, d, d, 140f, -280f); path.AddLine(Pj, Pa); return path; }/// /// 获取滑块区域/// /// /// /// /// /// /// private static Image CaptureSlider(Image image, GraphicsPath path, int x, int width, int height){Bitmap concave = new Bitmap(image.Width, image.Height); Graphics g = GetGraphics(concave); TextureBrush brush = new TextureBrush(image); g.Clear(Color.Transparent); g.FillPath(brush, path); g.Dispose(); return CaptureImage(concave, x, height); }/// /// 裁剪图片/// /// /// /// /// /// private static Image CaptureImage(Image fromImage, int offsetX, int height){int width = Config.l + Config.d + Config.blod; Bitmap bitmap = new Bitmap(width, height); Graphics g = GetGraphics(bitmap); g.DrawImage(fromImage, 0, 0, new Rectangle(offsetX, 0, width, height), GraphicsUnit.Pixel); g.Dispose(); return bitmap; }/// /// 生成随机数/// /// /// /// private static int RandomNext(int min, int max){Random random = new Random(Guid.NewGuid().GetHashCode()); return random.Next(min, max); }/// /// 取反色/// /// /// public static Color AntiColor(Color color){if (color.R > 128 && color.G > 128 && color.B > 128){return Color.Black; }else{return Color.White; }}/// /// 获取背景图/// /// private static Bitmap BgImage(){WebClient web = new WebClient(); int num = RandomNext(1, 20); Stream stream = web.OpenRead($"http://00x1.com/images/Pic/{num}.jpg"); Bitmap bitmap = (Bitmap)Image.FromStream(stream); return bitmap; }/// /// base64转图片/// /// /// public static Bitmap Base64ToImage(string base64string){byte[] b = Convert.FromBase64String(base64string); MemoryStream ms = new MemoryStream(b); Bitmap bitmap = new Bitmap(ms); return bitmap; }/// /// 图片转base64/// /// /// public static string ImageToBase64(Image image, ImageFormat format){if (image == null) return string.Empty; string strbaser64 = ""; try{string head = ""; string formatName = ImgFormat.NameFromGuid(format); head = $"data:image/{formatName.ToLower()}; base64,"; MemoryStream ms = new MemoryStream(); image.Save(ms, format); byte[] arr = new byte[ms.Length]; ms.Position = 0; ms.Read(arr, 0, (int)ms.Length); ms.Close(); strbaser64 = head+Convert.ToBase64String(arr); }catch (Exception){throw new Exception("Something wrong during convert!"); }return strbaser64; }}}

CaptchaModel.cs

using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Text; namespace SliderCaptcha.NET{public class CaptchaModel{public int X { get; set; }public int Y { get; set; }public Image Background { get; set; }public Image Slide { get; set; }}public class Captcha64Model{public int X { get; set; }public int Y { get; set; }public string Background { get; set; }public string Slide { get; set; }}}

using System; namespace SliderCaptcha.NET{public class Config{/// /// 矩形宽/// public static int l = 42; /// /// 圆形半径/// public static int r = 9; /// /// 圆形直径/// public static int d = r * 2; /// /// 计算圆形与矩形交接三角形边/// public static int a = (int)(r * Math.Sin(Math.PI * (50 / 180f))); public static int b = (int)(r * Math.Cos(Math.PI * (50 / 180f))); public static int c = r - a; /// /// 滑块边框/// public static int blod = 2; /// /// 水印/// public static string watermarkText = "SC.NET"; /// /// 是否显示水印/// public static bool showWatermark = true; }}

using System; using System.Collections.Generic; using System.Drawing.Imaging; namespace SliderCaptcha.NET{public class ImgFormat{private static Dictionary Formats = new Dictionary() {{"b96b3caa-0728-11d3-9d7b-0000f81ef32e","MemoryBmp"},{"b96b3cab-0728-11d3-9d7b-0000f81ef32e","Bmp"},{"b96b3cac-0728-11d3-9d7b-0000f81ef32e","Emf"},{"b96b3cad-0728-11d3-9d7b-0000f81ef32e","Wmf"},{"b96b3cae-0728-11d3-9d7b-0000f81ef32e","Jpeg"},{"b96b3caf-0728-11d3-9d7b-0000f81ef32e","Png"},{"b96b3cb0-0728-11d3-9d7b-0000f81ef32e","Gif"},{"b96b3cb1-0728-11d3-9d7b-0000f81ef32e","Tiff"},{"b96b3cb2-0728-11d3-9d7b-0000f81ef32e","Exif"},{"b96b3cb5-0728-11d3-9d7b-0000f81ef32e","Icon"}}; public static ImageFormat FormatFromGuid(ImageFormat format){return FormatFromGuid(format.Guid); }public static ImageFormat FormatFromGuid(Guid guid){return FormatFromGuid(guid.ToString()); }public static ImageFormat FormatFromGuid(string guid){if (Formats.ContainsKey(guid)){string name = Formats[guid]; ImageFormat format = null; switch (name){case "MemoryBmp":format = ImageFormat.MemoryBmp; break; case "Bmp":format = ImageFormat.Bmp; break; case "Emf":format = ImageFormat.Emf; break; case "Wmf":format = ImageFormat.Wmf; break; case "Gif":format = ImageFormat.Gif; break; case "Jpeg":format = ImageFormat.Jpeg; break; case "Png":format = ImageFormat.Png; break; case "Tiff":format = ImageFormat.Tiff; break; case "Exif":format = ImageFormat.Exif; break; case "Icon":format = ImageFormat.Icon; break; }return format; }else{return null; }}public static string NameFromGuid(ImageFormat format){return NameFromGuid(format.Guid); }public static string NameFromGuid(Guid guid){return NameFromGuid(guid.ToString()); }public static string NameFromGuid(string guid){if (Formats.ContainsKey(guid)){return Formats[guid]; }else{return string.Empty; }}}}

使用：
这里用的是asp.net mvc 的框架，用的是api接口，前后端分离供前端使用。具体使用根据个人需求，可以是接口调用亦可以是项目调用。
呼声如果很高的话，考虑出一个winfrom版本的滑动验证码~（滑稽）

[HttpGet]public IHttpActionResult GetCaptcha(){Captcha64Model model = Captcha.GenerateBase64(); CacheHelper.Cache.SetCache("sliderX", model.X); Hashtable ht = new Hashtable(); ht.Add("background", model.Background); ht.Add("slider", model.Slide); ht.Add("sliderXXXXX", model.X); return Json(ht); }/// /// 检查验证/// /// /// [HttpPost]public IHttpActionResult CheckCaptcha([FromBody] int x = 0){Hashtable hs = new Hashtable(); string Mess = ""; int Code = 0; var session = CacheHelper.Cache.GetCache("sliderX"); if (session == null){Mess = "请刷新验证码"; Code = 500; goto block; }string sliderXStr = session?.ToString(); // as stringint sliderX = Convert.ToInt32(sliderXStr); int difX = sliderX - x; if (difX >= 0 - Config.blod && difX <= Config.blod){Mess = "success"; Code = 0; }else{session = null; Mess = "错误"; Code = 500; }block:hs.Add("Mess", Mess); hs.Add("Code", Code); return Json(hs); }

前端代码：

* {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.sc-captcha {width: 300px; margin: 100px auto; }.sc_net_panel {padding: 10px; }.sc_net_panel > div {position: relative; }.bg_slider {position: absolute; left: 0; top: 0; }.bg_refresh {position: absolute; right: 5px; top: 5px; background: #808080; color: #fff; border-radius: 3px; width: 16px; line-height: 16px; text-align: center; cursor: pointer; }.sc_net_slider_icon {position: absolute; left: 0; top: 0; height: 37px; text-align: center; border-radius: 5px; border: #808080 1px solid; width: 37px; line-height: 37px; cursor: pointer; }.sc_net_slider_icon:hover {color: #fff; background: #1991fa; }.sc_net_slider_text {position: absolute; left: 0; top: 0; text-align: center; width: 280px; color: #45494c; border: #808080 1px solid; border-radius: 5px; line-height: 35px; height: 37px; cursor: default; }.sc_net_slider_area {position: absolute; left: 0; top: 0; height: 37px; }?向右拖动滑块填充拼图?

结语： 到这里基本上就已经完成了，以上前端地址更换成自己的接口即可。正常业务 验证码是很频发的一个操作并且是多用户。所以缓存存储的时候也需要注意一下。
【C#滑动验证码拼图验证功能实现(SlideCaptcha)】到此这篇关于C#滑动验证码拼图验证功能实现的文章就介绍到这了,更多相关C#滑动验证码拼图验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

• 

  我们后代会把和珅扮演者王刚误认为就是当年的和坤吗？
• 

  乐视超级电视使用教程 乐视超级电视如何与电脑连接，乐视超级电视怎么连接机顶盒
• 

  饥荒什么食物加精神？饥荒精神值恢复食物推荐
• 

  仅见过三次面的当红小花成姐妹，究竟是真正投缘还是塑料情谊（）
• 

  担担面的酱怎么炒 豆瓣酱煮担担面怎么做
• 

  职场菜鸟别傻傻做炮灰，职场上的菜鸟
• 

  惠普电脑怎么设置默认浏览器
• 

  学习历程分享|单片机，DSP，ARM，FPGA的特点与区别
• 

  轿车国六是什么标志 国六车是什么标志
• 

  梦见别人病重 梦见别人病重卧床
• 

  windows服务器运维，windows server服务器运维
• 

  松下|一波多折！苹果和比亚迪宁德时代谈崩了，汽车电池要找松下合作？
• 

  Win10打不开https站点提示“http 500 内部服务器错误”如何解决？
• 

  麻辣火锅鸡做法 火锅麻辣鸡的做法
• 

  西南医科大学附属医院|“粑粑”也能治病？四川这家医院的“粪菌移植术”两年治愈近百名患者
• 

  佳能打印机1403让你的办公效率翻倍，让你的工作更轻松
• 

  小米11啥时候出啊 小米miui11什么时候出
• 

  秸秆粉碎还田机视频
• 

  关于LeNet-5卷积神经网络 S2层与C3层连接的参数计算的思考（？？）
• 

  尼康d4画质比d3s 尼康d4s可以实时显示画面吗

• Mac的9款最佳密码管理器合集（哪个最好用（））
• Wifi密码怎样改
• 原创源码角度分析Android的消息机制系列——Handler的工作原理
• 撸完Dubbo源码，冰河总结了这些阅读源码的技巧，赶快收藏
• 优维低代码（聊聊Context 和 State）
• vue封装图片滑块验证组件的方法
• Libgdx: android单机斗地主支持局域网wifi联网的网络模块核心代码
• id密码正确却下载不了软件
• 《Android源代码设计模式解析与实战》读书笔记
• 华为手机锁屏密码在哪里设置