基于C#实现图片滑动验证码的示例代码
更新时间：2022年04月14日 14:25:42 作者：破剑冰
这篇文章主要为大家介绍了如何利用C#语言制作一个图片滑动验证码，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
图片准备
hole.png和slider.png为png是因为图片带有透明度。
合成目标
最终为前端生成两张图片：
out_slider.png高度为344与背景图等高。
也可以打开滑动验证Demo页面，F12来观察图片。
实现
本机环境为.net 6.0.300-preview.22204.3, 装有Vscode。
1.创建项目
创建console项目
mkdir SlideImageGenerator cd SlideImageGenerator dotnet new console
2.Nuget添加ImageSharp
dotnet add package SixLabors.ImageSharp dotnet add package SixLabors.ImageSharp.Drawing --prerelease
3.vscode打开
4.引入图片
创建Images目录, 并放入bg.jpg，hole.png，slider.png
mkdir Images
5.生成out_bg.jpg
out_bg.jpg生成比较简单，直接将hole.png"叠加"到bg.jpg。hole.png黑色区域是半透明的，因此能够隐约看到背景。开始!
清空Program.cs，引入命名空间
using SixLabors.ImageSharp; using SixLabors.ImageSharp.Drawing; using SixLabors.ImageSharp.PixelFormats; using SixLabors.ImageSharp.Processing; using SixLabors.ImageSharp.Drawing.Processing;
生成随机坐标，代表要凹槽的起始位置:
// 生成随机坐标 int randomX = 100, randomY = 120;
加载图片
using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");
"叠加"holeTemplateImage到backgroundImage。用ImageSharp来说就是以backgroundImage为底，从位置randomX，randomY开始绘制holeTemplateImage。
backgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
backgroundImage.SaveAsJpegAsync("out_bg.jpg");
运行
dotnet run
运行后可以在目录看到out_bg.jpg
全部代码：
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Drawing.Processing;
// 生成随机坐标
int randomX = 100, randomY = 120;
// 加载图片
using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");
// "叠加"holeTemplateImage到backgroundImage
backgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
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步骤我直接上代码，其实就一个裁剪操作:
// backgroundImage已做修改，这里重新加载背景
using var backgroundImage2 = Image.Load<Rgba32>("images/bg.jpg");
using var holeMattingImage = new Image<Rgba32>(sliderTemplateImage.Width, sliderTemplateImage.Height); // 110 * 110
// 根据透明度计算凹槽图轮廓形状(形状由不透明区域形成)
var holeShape = CalcHoleShape(holeTemplateImage);
// 生成凹槽抠图
holeMattingImage.Mutate(x =>
{
// 可以这样理解：
// 将holeShape想象成一幅110X110的图片
// p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1)则表示
// 从holeShape的-randomX, -randomY开始绘制backgroundImage2(相当于backgroundImage2左移randomX，上移randomY)
// 然后将holeShape绘制结果叠加到holeMattingImage上
x.Clip(holeShape, p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1));
});
holeMattingImage.SaveAsJpegAsync("out_holeMatting.jpg");裁剪注意传入的负坐标，注释是我个人的理解。凹槽的形状通过CalcHoleShape实现的，原理是一行行扫描图像，每行连续不透明区域（包含半透明）形成一个或多个n*1的矩形。最后将所有小矩形组合形成一个组合形状ComplexPolygon
Func<Image<Rgba32>, ComplexPolygon> CalcHoleShape = (holeTemplateImage) => {
int temp = 0;
var pathList = new List<IPath>();
holeTemplateImage.ProcessPixelRows(accessor =>
{
for (int y = 0; y < holeTemplateImage.Height; y++)
{
var rowSpan = accessor.GetRowSpan(y);
for (int x = 0; x < rowSpan.Length; x++)
{
ref Rgba32 pixel = ref rowSpan[x];
if (pixel.A != 0)
{
if (temp == 0)
{
temp = x;
}
}
else
{
if (temp != 0)
{
pathList.Add(new RectangularPolygon(temp, y, x - temp, 1));
temp = 0;
}
}
}
}
});
return new ComplexPolygon(new PathCollection(pathList));
};运行,形成out_holeMatting.jpg
dotnet run
b. 将slider.png"叠加"到抠图holeMattingImage，代码比较简单
// 叠加拖块模板
holeMattingImage.Mutate(x => x.DrawImage(sliderTemplateImage, new Point(0, 0), 1));
holeMattingImage.SaveAsJpegAsync("out_holeMatting2.jpg");
运行,形成out_holeMatting2.jpg
dotnet run
c. 将out_holeMatting2叠加到"叠加"到一个高为344,宽为110的透明区域
using var sliderBarImage = new Image<Rgba32>(sliderTemplateImage.Width, backgroundImage2.Height);
// 绘制拖块条
sliderBarImage.Mutate(x => x.DrawImage(holeMattingImage, new Point(0, randomY), 1));
sliderBarImage.SaveAsJpegAsync("out_slider.jpg");
运行,形成out_slider.jpg
dotnet run
全部代码
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using SixLabors.ImageSharp.Drawing.Processing;
// 生成随机坐标
int randomX = 100, randomY = 120;
// 加载图片
using var backgroundImage = Image.Load<Rgba32>("images/bg.jpg");
using var holeTemplateImage = Image.Load<Rgba32>("images/hole.png");
using var sliderTemplateImage = Image.Load<Rgba32>("images/slider.png");
// "叠加"holeTemplateImage到backgroundImage
backgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));
backgroundImage.SaveAsJpegAsync("out_bg.jpg");
Func<Image<Rgba32>, ComplexPolygon> CalcHoleShape = (holeTemplateImage) => {
int temp = 0;
var pathList = new List<IPath>();
holeTemplateImage.ProcessPixelRows(accessor =>
{
for (int y = 0; y < holeTemplateImage.Height; y++)
{
var rowSpan = accessor.GetRowSpan(y);
for (int x = 0; x < rowSpan.Length; x++)
{
ref Rgba32 pixel = ref rowSpan[x];
if (pixel.A != 0)
{
if (temp == 0)
{
temp = x;
}
}
else
{
if (temp != 0)
{
pathList.Add(new RectangularPolygon(temp, y, x - temp, 1));
temp = 0;
}
}
}
}
});
return new ComplexPolygon(new PathCollection(pathList));
};
// backgroundImage已做修改，这里重新加载背景
using var backgroundImage2 = Image.Load<Rgba32>("images/bg.jpg");
using var holeMattingImage = new Image<Rgba32>(sliderTemplateImage.Width, sliderTemplateImage.Height); // 110 * 110
// 根据透明度计算凹槽图轮廓形状(形状由不透明区域形成)
var holeShape = CalcHoleShape(holeTemplateImage);
// 生成凹槽抠图
holeMattingImage.Mutate(x =>
{
// 可以这样理解：
// 将holeShape想象成一幅110X110的图片
// p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1)则表示
// 从holeShape的-randomX, -randomY开始绘制backgroundImage2(相当于backgroundImage2左移randomX，上移randomY)
// 然后将holeShape绘制结果叠加到holeMattingImage上
x.Clip(holeShape, p => p.DrawImage(backgroundImage2, new Point(-randomX, -randomY), 1));
});
holeMattingImage.SaveAsJpegAsync("out_holeMatting.jpg");
// 叠加拖块模板
holeMattingImage.Mutate(x => x.DrawImage(sliderTemplateImage, new Point(0, 0), 1));
holeMattingImage.SaveAsJpegAsync("out_holeMatting2.jpg");
using var sliderBarImage = new Image<Rgba32>(sliderTemplateImage.Width, backgroundImage2.Height);
// 绘制拖块条
sliderBarImage.Mutate(x => x.DrawImage(holeMattingImage, new Point(0, randomY), 1));
sliderBarImage.SaveAsJpegAsync("out_slider.jpg");最后
完整的滑动验证，可以参考LazySlideCaptcha。
到此这篇关于基于C#实现图片滑动验证码的示例代码的文章就介绍到这了,更多相关C#图片滑动验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了C#实现鼠标裁剪图像功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要为大家介绍了C#中一维数组如何快速实现数组元素的数据类型的转换，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
.NET(C#):Emit创建异常处理的方法，需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了C#获取USB事件API,实例分析了C#操作USB事件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-05-05
JSON数据格式简洁，用于数据的持久化和对象传输很实用。最近在做一个Razor代码生成器，需要把数据库的表和列的信息修改后保存下来，想到用JSON序列化对象并保存，需要时再反序列化成对象会简单一些2012-11-11
这篇文章主要为大家详细介绍了C#对Windows服务组的启动与停止操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要为大家详细介绍了C#基于FTP协议的简易软件自动升级程序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
params是c#的一个关键字，用用汉语来说的话叫可变参数，这里的可变，不是说的类型可变，而是指的个数可变，这是c#的一个基础关键字，相信大家都有一定的了解，本篇文章就来大致的说一下C#可变参数params2022-02-02
这篇文章主要为大家详细介绍了Unity UI组件ScrollRect实现无限滚动条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章介绍了C#使用CefSharp控件实现爬虫的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论