江苏龙网

  1. 主页 > 生活百科 > >

一步一步生成滑动验证码图片

验证码

图片
名称
尺寸

一步一步生成滑动验证码图片

文章插图
 
bg.jpg
552 * 344

一步一步生成滑动验证码图片

文章插图
 
hole.png
110 * 110

一步一步生成滑动验证码图片

文章插图
 
slider.png
110 * 110
hole.png和slider.png为png是因为图片带有透明度 。

 
合成目标最终为前端生成两张图片：
图片
名称
尺寸

一步一步生成滑动验证码图片

文章插图
 
out_bg.jpg
552 * 344

一步一步生成滑动验证码图片

文章插图
 
out_slider.png
110 * 344
out_slider.png高度为344与背景图等高 。
也可以打开滑动验证Demo页面，F12来观察图片 。
一步一步生成滑动验证码图片

文章插图
 

一步一步生成滑动验证码图片

文章插图
 
 
实现本机环境为.net 6.0.300-preview.22204.3, 装有Vscode 。
1.创建项目创建console项目
mkdir SlideImageGeneratorcd SlideImageGeneratordotnet new console2.添加ImageSharpdotnet add package SixLabors.ImageSharpdotnet add package SixLabors.ImageSharp.Drawing --prerelease3.vscode打开code .
一步一步生成滑动验证码图片

文章插图
 
4.引入图片创建Images目录, 并放入bg.jpg，hole.png，slider.png
mkdir Images
一步一步生成滑动验证码图片

文章插图
 
5.生成out_bg.jpgout_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到backgroundImagebackgroundImage.Mutate(x => x.DrawImage(holeTemplateImage, new Point(randomX, randomY), 1));backgroundImage.SaveAsJpegAsync("out_bg.jpg");6.生成out_slider.pngout_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");


推荐阅读


上一篇：快来看看设计师使用的是什么电脑

下一篇：淘宝店铺被禁止开店怎么解封 为什么淘宝店铺订单被拦截