. net to generate dynamic verification code

Time:2020-6-15

preface

The verification code is to write a few words on the picture, and then do special processing for these words, such as twisting, rotating, modifying the position of the words, and then add some lines, or add some special effects, so that these can be recognized normally by human beings, but it is difficult for the machine to recognize them, so as to achieve the effect of preventing crawlers and robots.

Verification code is usually used in websites, which is a good way to prevent crawlers and robots. In the past, verification code was created in. Net, usually usingSystem.DrawingCreate a normal verification code.

In the previous blog. Net, a better way to generate watermarks, I mentioned how to add watermarks to pictures. This article will further explore based on the previous blog, using direct2d to create a verification code.

traditionSystem.DrawingMethods

Preconditions: ReferencesSystem.Drawing, or install nuget package:System.Drawing.Common


<PackageReference Include="System.Drawing.Common" Version="4.5.1" />

First, create a picture with several words (basic operation):

byte[] GetImage(int width, int height, string text)
{
 using (var bitmap = new Bitmap(width, height))
 using (var g = Graphics.FromImage(bitmap))
 {
  var r = new Random();

  g.Clear(ColorFromHsl(r.NextDouble(), 1.0f, 0.8f, 0xff));

  var brush = new SolidBrush(Color.Black);
  var fontSize = width / text.Length;
  var font = new Font(FontFamily.GenericSerif, fontSize, FontStyle.Bold, GraphicsUnit.Pixel);
  for (var i = 0; i < text.Length; i++)
  {
   brush.Color = ColorFromHsl(r.NextDouble(), 1.0f, 0.3f, 0xff);
   float x = i * fontSize;
   float y = r.Next(0, height - fontSize);

   g.DrawString(text[i].ToString(), font, brush, x, y);
  }

  //Add some other effects here

  var ms = new MemoryStream();
  bitmap.Save(ms, ImageFormat.Png);
  return ms.ToArray();
 }
}

Effect (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

Then add some lines:


using (var pen = new Pen(brush, 3))
{
 for (var i = 0; i < 4; ++i)
 {
  pen.Color = ColorFromHsl(r.NextDouble(), 1.0f, 0.4f, 0xff);
  var p1 = new Point(r.Next(width), r.Next(height));
  var p2 = new Point(r.Next(width), r.Next(height));
  g.DrawLine(pen, p1, p2);
 }
}

Effect (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

What else can we do?

Unfortunately, there is still a lot to do, even if the lines are added, the machine can still easily identify them.

howeverEdi.WangIn his blog, he also published a nuget package to generate a verification code:Edi.CaptchaUp to now, the latest version is 1.3.1:


<PackageReference Include="Edi.Captcha" Version="1.3.1" />

This bag is based onSystem.DrawingThe distortion effect and some random x-coordinate offsets are added, which greatly increases the difficulty of AI recognition.

Usage:


CaptchaResult result = CaptchaImageGenerator.GetImage(200, 100, "HELLO");

Captcharesult is defined as follows:


public class CaptchaResult
{
 public string CaptchaCode { get; set; }

 public byte[] CaptchaByteData { get; set; }

 public string CaptchBase64Data => Convert.ToBase64String(CaptchaByteData);

 public DateTime Timestamp { get; set; }
}

The generated effect is as follows (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

Direct2D

In the previous blog, there was a brief introduction to direct2d. It will not be introduced here.

Start by writing on the simplest picture:

byte[] SaveD2DBitmap(int width, int height, string text)
{
 using var wic = new WIC.ImagingFactory2();
 using var d2d = new D2D.Factory();
 using var wicBitmap = new WIC.Bitmap(wic, width, height, WIC.PixelFormat.Format32bppPBGRA, WIC.BitmapCreateCacheOption.CacheOnDemand);
 using var target = new D2D.WicRenderTarget(d2d, wicBitmap, new D2D.RenderTargetProperties());
 using var dwriteFactory = new SharpDX.DirectWrite.Factory();
 using var brush = new SolidColorBrush(target, Color.Yellow);
 
 var r = new Random();
 
 target.BeginDraw();
 target.Clear(ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.3f));
 var textFormat = new DWrite.TextFormat(dwriteFactory, "Times New Roman", 
  DWrite.FontWeight.Bold, 
  DWrite.FontStyle.Normal, 
  width / text.Length);
 for (int charIndex = 0; charIndex < text.Length; ++charIndex)
 {
  using var layout = new DWrite.TextLayout(dwriteFactory, text[charIndex].ToString(), textFormat, float.MaxValue, float.MaxValue);
  var layoutSize = new Vector2(layout.Metrics.Width, layout.Metrics.Height);
  using var b2 = new LinearGradientBrush(target, new D2D.LinearGradientBrushProperties
  {
   StartPoint = Vector2.Zero, 
   EndPoint = layoutSize, 
  }, new GradientStopCollection(target, new[]
  {
   new GradientStop{ Position = 0.0f, Color = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.8f) },
   new GradientStop{ Position = 1.0f, Color = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.8f) },
  }));

  var position = new Vector2(charIndex * width / text.Length, r.NextFloat(0, height - layout.Metrics.Height));
  target.Transform = 
   Matrix3x2.Translation(-layoutSize / 2) * 
   //Text rotation and twist effects, uncomment the following two lines of code
   // Matrix3x2.Skew(r.NextFloat(0, 0.5f), r.NextFloat(0, 0.5f)) *
   // Matrix3x2.Rotation(r.NextFloat(0, MathF.PI * 2)) * 
   Matrix3x2.Translation(position + layoutSize / 2);
  target.DrawTextLayout(Vector2.Zero, layout, b2);
 }
 //Other effects are inserted here

 target.EndDraw();

 using (var encoder = new WIC.BitmapEncoder(wic, WIC.ContainerFormatGuids.Png))
 using (var ms = new MemoryStream())
 {
  encoder.Initialize(ms);
  using (var frame = new WIC.BitmapFrameEncode(encoder))
  {
   frame.Initialize();
   frame.SetSize(wicBitmap.Size.Width, wicBitmap.Size.Height);

   var pixelFormat = wicBitmap.PixelFormat;
   frame.SetPixelFormat(ref pixelFormat);
   frame.WriteSource(wicBitmap);

   frame.Commit();
  }

  encoder.Commit();
  return ms.ToArray();
 }
}

Usage:


byte[] captchaBytes = SaveD2DBitmap(200, 100, "Hello");

Effect (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

Note that direct2d generated text does notSystem.DrawingThat kind of serration.

If you cancel the two lines of comments, you can get a more distorted and rotated effect (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

Then add lines:


for (var i = 0; i < 4; ++i)
{
 target.Transform = Matrix3x2.Identity;
 brush.Color = ColorFromHsl(r.NextFloat(0,1), 1.0f, 0.3f);
 target.DrawLine(
  r.NextVector2(Vector2.Zero, new Vector2(width, height)),
  r.NextVector2(Vector2.Zero, new Vector2(width, height)),
  brush, 3.0f);
}

Effect (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

Operation of direct2d

There are many special effects built in direct2d, such as shadow. Here we need to use displacement and turbulence. In order to achieve the special effects, we need to add a bitmap layer. The overall code is as follows:


byte[] SaveD2DBitmap(int width, int height, string text)
{
 using var wic = new WIC.ImagingFactory2();
 using var d2d = new D2D.Factory();
 using var wicBitmap = new WIC.Bitmap(wic, width, height, WIC.PixelFormat.Format32bppPBGRA, WIC.BitmapCreateCacheOption.CacheOnDemand);
 using var target = new D2D.WicRenderTarget(d2d, wicBitmap, new D2D.RenderTargetProperties());
 using var dwriteFactory = new SharpDX.DirectWrite.Factory();
 using var brush = new D2D.SolidColorBrush(target, Color.Yellow);
 using var encoder = new WIC.PngBitmapEncoder(wic); // PngBitmapEncoder
 
 using var ms = new MemoryStream();
 using var dc = target.QueryInterface<D2D.DeviceContext>();
 using var bmpLayer = new D2D.Bitmap1(dc, target.PixelSize,
  new D2D.BitmapProperties1(new D2D.PixelFormat(SharpDX.DXGI.Format.B8G8R8A8_UNorm, D2D.AlphaMode.Premultiplied),
  d2d.DesktopDpi.Width, d2d.DesktopDpi.Height,
  D2D.BitmapOptions.Target));

 var r = new Random();
 encoder.Initialize(ms);

 D2D.Image oldTarget = dc.Target;
 {
  dc.Target = bmpLayer;
  dc.BeginDraw();
  var textFormat = new DWrite.TextFormat(dwriteFactory, "Times New Roman",
   DWrite.FontWeight.Bold,
   DWrite.FontStyle.Normal,
   width / text.Length);
  for (int charIndex = 0; charIndex < text.Length; ++charIndex)
  {
   using var layout = new DWrite.TextLayout(dwriteFactory, text[charIndex].ToString(), textFormat, float.MaxValue, float.MaxValue);
   var layoutSize = new Vector2(layout.Metrics.Width, layout.Metrics.Height);
   using var b2 = new D2D.LinearGradientBrush(dc, new D2D.LinearGradientBrushProperties
   {
    StartPoint = Vector2.Zero,
    EndPoint = layoutSize,
   }, new D2D.GradientStopCollection(dc, new[]
   {
    new D2D.GradientStop{ Position = 0.0f, Color = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.8f) },
    new D2D.GradientStop{ Position = 1.0f, Color = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.8f) },
   }));

   var position = new Vector2(charIndex * width / text.Length, r.NextFloat(0, height - layout.Metrics.Height));
   dc.Transform =
    Matrix3x2.Translation(-layoutSize / 2) *
    Matrix3x2.Skew(r.NextFloat(0, 0.5f), r.NextFloat(0, 0.5f)) *
    //Matrix3x2.Rotation(r.NextFloat(0, MathF.PI * 2)) *
    Matrix3x2.Translation(position + layoutSize / 2);
   dc.DrawTextLayout(Vector2.Zero, layout, b2);
  }
  for (var i = 0; i < 4; ++i)
  {
   target.Transform = Matrix3x2.Identity;
   brush.Color = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.3f);
   target.DrawLine(
    r.NextVector2(Vector2.Zero, new Vector2(width, height)),
    r.NextVector2(Vector2.Zero, new Vector2(width, height)),
    brush, 3.0f);
  }
  target.EndDraw();
 }
 
 Color background = ColorFromHsl(r.NextFloat(0, 1), 1.0f, 0.3f);
 // for (var frameId = -10; frameId < 10; ++frameId)
 {
  dc.Target = null;
  using var displacement = new D2D.Effects.DisplacementMap(dc);
  displacement.SetInput(0, bmpLayer, true);
  displacement.Scale = 100.0f; // Math.Abs(frameId) * 10.0f;
  
  var turbulence = new D2D.Effects.Turbulence(dc);
  displacement.SetInputEffect(1, turbulence);

  dc.Target = oldTarget;
  dc.BeginDraw();
  dc.Clear(background);
  dc.DrawImage(displacement);
  dc.EndDraw();

  using (var frame = new WIC.BitmapFrameEncode(encoder))
  {
   frame.Initialize();
   frame.SetSize(wicBitmap.Size.Width, wicBitmap.Size.Height);

   var pixelFormat = wicBitmap.PixelFormat;
   frame.SetPixelFormat(ref pixelFormat);
   frame.WriteSource(wicBitmap);

   frame.Commit();
  }
 }

 encoder.Commit();
 return ms.ToArray();
}

Note that this code usesusing varStatement, C × 8.0using declarationFunction, can be usedusing (var )Statement instead.

The effect is as follows (GIF is generated from multiple screenshots generated by linqpad, which is actually a static image):

On this basis, (thank youDirect2D/WIC) with minor changes, a dynamic GIF image can be generated.

Just modify the above code slightly:

  • takePngBitmapEncoderChange toGifBitmapEncoder*
  • And thenforLoop uncomment
  • takedisplacement.Scale = 100.0f;Change todisplacement.Scale = Math.Abs(frameId) * 10.0f;

You can see the following effects (directly generated, not screenshot):



epilogue

The final code generation effect can be downloaded from here and opened with linqpad 6.

This article uses sharpdx, which is the conversion layer from C to DirectX. The bad news is that the sharpdx used in the figure above has stopped maintenance, but no replacement library has been found (probably because it is so easy to use).

I used to use direct2d for games, but more and more recently direct2d has been used to solve practical problems. Because of direct2d’s high color value and high performance, direct2d has been everywhere. Browser / word / Excel and other daily software are deeply integrated direct2d applications. It is believed that direct2d can be used in more scenes.

summary

The above is the whole content of this article. I hope that the content of this article has some reference learning value for your study or work. Thank you for your support for developepaer.