一步一步生成滑動驗證碼圖片

pojianbing發表於2022-04-14

圖片準備

圖片 名稱 尺寸
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 SlideImageGenerator
cd SlideImageGenerator
dotnet new console

2.新增ImageSharp

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

3.vscode開啟

code .

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。寫的比較水,歡迎Star。?

相關文章