基于C#实现图片滑动验证码的示例代码

风已若尘

图片准备

hole.png和slider.png为png是因为图片带有透明度。

合成目标

最终为前端生成两张图片：

out_slider.png高度为344与背景图等高。
也可以打开滑动验证Demo页面，F12来观察图片。

实现

本机环境为.net 6.0.300-preview.22204.3, 装有Vscode。

1.创建项目

创建console项目

1. mkdir SlideImageGenerator
   
2. cd SlideImageGenerator
   
3. dotnet new console

复制代码

2.Nuget添加ImageSharp

1. dotnet add package SixLabors.ImageSharp
   
2. dotnet add package SixLabors.ImageSharp.Drawing --prerelease

复制代码

3.vscode打开

4.引入图片

创建Images目录, 并放入bg.jpg，hole.png，slider.png

1. mkdir Images

复制代码

5.生成out_bg.jpg

out_bg.jpg生成比较简单，直接将hole.png"叠加"到bg.jpg。hole.png黑色区域是半透明的，因此能够隐约看到背景。开始!
清空Program.cs，引入命名空间

1. using SixLabors.ImageSharp;
   
2. using SixLabors.ImageSharp.Drawing;
   
3. using SixLabors.ImageSharp.PixelFormats;
   
4. using SixLabors.ImageSharp.Processing;
   
5. using SixLabors.ImageSharp.Drawing.Processing;

复制代码

生成随机坐标，代表要凹槽的起始位置:

1. // 生成随机坐标
   
2. int randomX = 100, randomY = 120;

复制代码

加载图片

1. using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
   
2. using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
   
3. using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");

复制代码

"叠加"holeTemplateImage到backgroundImage。用ImageSharp来说就是以backgroundImage为底，从位置randomX，randomY开始绘制holeTemplateImage。

1. backgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
   
2. backgroundImage.SaveAsJpegAsync("out_bg.jpg");

复制代码

运行

1. dotnet run

复制代码

运行后可以在目录看到out_bg.jpg

全部代码：

1. using SixLabors.ImageSharp;
   
2. using SixLabors.ImageSharp.Drawing;
   
3. using SixLabors.ImageSharp.PixelFormats;
   
4. using SixLabors.ImageSharp.Processing;
   
5. using SixLabors.ImageSharp.Drawing.Processing;// 生成随机坐标
   
6. int randomX = 100, randomY = 120;// 加载图片using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
   
7. using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
   
8. using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");// "叠加"holeTemplateImage到backgroundImagebackgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
   
9. backgroundImage.SaveAsJpegAsync("out_bg.jpg");

复制代码

6.生成out_slider.png

out_slider.png生成需要三步:
a. 从背景图中扣出凹槽区域，形成holeMattingImage。
b. 将slider.png"叠加"到抠图holeMattingImage。
c. 将b生成的图形"叠加"到一个高为344,宽为110的透明区域，最终生成out_slider.
以下具体讲解：
a步骤我直接上代码，其实就一个裁剪操作:

1. // backgroundImage已做修改，这里重新加载背景
   
2. using var backgroundImage2 = Image.Load<Rgba32>("images/bg.jpg");
   
3. using var holeMattingImage = new Image<Rgba32>(sliderTemplateImage.Width, sliderTemplateImage.Height); // 110 * 110
   
4. // 根据透明度计算凹槽图轮廓形状(形状由不透明区域形成)
   
5. var holeShape = CalcHoleShape(holeTemplateImage);
   
6. // 生成凹槽抠图
   
7. holeMattingImage.Mutate(x =>
   
8. {
   
9.     // 可以这样理解：
   
10.     //   将holeShape想象成一幅110X110的图片
    
11.     //   p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1)则表示
    
12.     //   从holeShape的-randomX, -randomY开始绘制backgroundImage2(相当于backgroundImage2左移randomX，上移randomY)
    
13.     //   然后将holeShape绘制结果叠加到holeMattingImage上
    
14.     x.Clip(holeShape, p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1));
    
15. });
    
16. holeMattingImage.SaveAsJpegAsync("out_holeMatting.jpg");

复制代码

裁剪注意传入的负坐标，注释是我个人的理解。凹槽的形状通过CalcHoleShape实现的，原理是一行行扫描图像，每行连续不透明区域（包含半透明）形成一个或多个n*1的矩形。最后将所有小矩形组合形成一个组合形状ComplexPolygon

1. Func<Image<Rgba32>, ComplexPolygon> CalcHoleShape = (holeTemplateImage) => {
   
2.     int temp = 0;
   
3.     var pathList = new List<IPath>();
   
4.     holeTemplateImage.ProcessPixelRows(accessor =>
   
5.     {
   
6.         for (int y = 0; y < holeTemplateImage.Height; y++)
   
7.         {
   
8.             var rowSpan = accessor.GetRowSpan(y);
   
9.             for (int x = 0; x < rowSpan.Length; x++)
   
10.             {
    
11.                 ref Rgba32 pixel = ref rowSpan[x];
    
12.                 if (pixel.A != 0)
    
13.                 {
    
14.                     if (temp == 0)
    
15.                     {
    
16.                         temp = x;
    
17.                     }
    
18.                 }
    
19.                 else
    
20.                 {
    
21.                     if (temp != 0)
    
22.                     {
    
23.                         pathList.Add(new RectangularPolygon(temp, y, x - temp, 1));
    
24.                         temp = 0;
    
25.                     }
    
26.                 }
    
27.             }
    
28.         }
    
29.     });
    
30. 
    
31.     return new ComplexPolygon(new PathCollection(pathList));
    
32. };

复制代码

运行,形成out_holeMatting.jpg

1. dotnet run

复制代码

b. 将slider.png"叠加"到抠图holeMattingImage，代码比较简单

1. // 叠加拖块模板
   
2. holeMattingImage.Mutate(x => x.DrawImage(sliderTemplateImage, new Point(0, 0), 1));
   
3. holeMattingImage.SaveAsJpegAsync("out_holeMatting2.jpg");

复制代码

运行,形成out_holeMatting2.jpg

1. dotnet run

复制代码

c. 将out_holeMatting2叠加到"叠加"到一个高为344,宽为110的透明区域

1. using var sliderBarImage = new Image<Rgba32>(sliderTemplateImage.Width, backgroundImage2.Height);
   
2. // 绘制拖块条
   
3. sliderBarImage.Mutate(x => x.DrawImage(holeMattingImage, new Point(0, randomY), 1));
   
4. sliderBarImage.SaveAsJpegAsync("out_slider.jpg");

复制代码

运行,形成out_slider.jpg

1. dotnet run

复制代码

全部代码

1. using SixLabors.ImageSharp;
   
2. using SixLabors.ImageSharp.Drawing;
   
3. using SixLabors.ImageSharp.PixelFormats;
   
4. using SixLabors.ImageSharp.Processing;
   
5. using SixLabors.ImageSharp.Drawing.Processing;// 生成随机坐标
   
6. int randomX = 100, randomY = 120;// 加载图片using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
   
7. using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
   
8. using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");// "叠加"holeTemplateImage到backgroundImagebackgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
   
9. backgroundImage.SaveAsJpegAsync("out_bg.jpg");Func<Image<Rgba32>, ComplexPolygon> CalcHoleShape = (holeTemplateImage) => {
   
10.     int temp = 0;
    
11.     var pathList = new List<IPath>();
    
12.     holeTemplateImage.ProcessPixelRows(accessor =>
    
13.     {
    
14.         for (int y = 0; y < holeTemplateImage.Height; y++)
    
15.         {
    
16.             var rowSpan = accessor.GetRowSpan(y);
    
17.             for (int x = 0; x < rowSpan.Length; x++)
    
18.             {
    
19.                 ref Rgba32 pixel = ref rowSpan[x];
    
20.                 if (pixel.A != 0)
    
21.                 {
    
22.                     if (temp == 0)
    
23.                     {
    
24.                         temp = x;
    
25.                     }
    
26.                 }
    
27.                 else
    
28.                 {
    
29.                     if (temp != 0)
    
30.                     {
    
31.                         pathList.Add(new RectangularPolygon(temp, y, x - temp, 1));
    
32.                         temp = 0;
    
33.                     }
    
34.                 }
    
35.             }
    
36.         }
    
37.     });
    
38. 
    
39.     return new ComplexPolygon(new PathCollection(pathList));
    
40. };// backgroundImage已做修改，这里重新加载背景
    
41. using var backgroundImage2 = Image.Load<Rgba32>("images/bg.jpg");
    
42. using var holeMattingImage = new Image<Rgba32>(sliderTemplateImage.Width, sliderTemplateImage.Height); // 110 * 110
    
43. // 根据透明度计算凹槽图轮廓形状(形状由不透明区域形成)
    
44. var holeShape = CalcHoleShape(holeTemplateImage);
    
45. // 生成凹槽抠图
    
46. holeMattingImage.Mutate(x =>
    
47. {
    
48.     // 可以这样理解：
    
49.     //   将holeShape想象成一幅110X110的图片
    
50.     //   p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1)则表示
    
51.     //   从holeShape的-randomX, -randomY开始绘制backgroundImage2(相当于backgroundImage2左移randomX，上移randomY)
    
52.     //   然后将holeShape绘制结果叠加到holeMattingImage上
    
53.     x.Clip(holeShape, p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1));
    
54. });
    
55. holeMattingImage.SaveAsJpegAsync("out_holeMatting.jpg");// 叠加拖块模板
    
56. holeMattingImage.Mutate(x => x.DrawImage(sliderTemplateImage, new Point(0, 0), 1));
    
57. holeMattingImage.SaveAsJpegAsync("out_holeMatting2.jpg");using var sliderBarImage = new Image<Rgba32>(sliderTemplateImage.Width, backgroundImage2.Height);
    
58. // 绘制拖块条
    
59. sliderBarImage.Mutate(x => x.DrawImage(holeMattingImage, new Point(0, randomY), 1));
    
60. sliderBarImage.SaveAsJpegAsync("out_slider.jpg");

复制代码

最后

完整的滑动验证，可以参考LazySlideCaptcha。
到此这篇关于基于C#实现图片滑动验证码的示例代码的文章就介绍到这了,更多相关C#图片滑动验证码内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

丌官昌

感谢楼主，顶。

彭雅宁

路过，支持一下

统某内拉又

感谢楼主分享。

武汉嘉瑞

顶顶更健康！！！