[Asp.Net Core] 为什么选择 Blazor Server Side (一) 快速实现图片验证码

 1 @page "/BlazorVerificationCode"
 2 
 3 <p>
 4     (Blazor) A sample for how to show verification code and verify it.
 5 </p>
 6 
 7 @inject IJSRuntime jsr
 8 
 9 @{
10     if (imgurl == null) MakeNewImage();
11 }
12 
13 <img style="border:solid 1px #ccc" src="@imgurl" />
14 <button @onclick="MakeNewImage">Renew</button>
15 <hr />
16 <div>Type the number in image</div>
17 <EditForm Model="this" OnSubmit="DoCheck">
18     <input type="text" @bind-value="inp_code" style="padding:5px" />
19     <button>Check</button>
20 </EditForm>
21 
22 @code{
23     string inp_code;
24     string vericode;
25     string imgurl;
26 
27     void DoCheck()
28     {
29         string msg = "You typed a wrong value";
30         if (inp_code == vericode)
31             msg = "Yes the number is " + vericode;
32         jsr.InvokeAsync<object>("alert", msg);
33     }
34 
35     void MakeNewImage()
36     {
37 
38         vericode = new Random().Next(100000, 999999).ToString();
39 
40         using SkiaSharp.SKBitmap bmp = new SkiaSharp.SKBitmap(200, 80);
41 
42         using (SkiaSharp.SKCanvas canvas = new SkiaSharp.SKCanvas(bmp))
43         {
44             canvas.Clear(SkiaSharp.SKColors.White);
45             using SkiaSharp.SKPaint skp = new SkiaSharp.SKPaint();
46             skp.Color = SkiaSharp.SKColors.Red;
47             skp.TextSize = 40;
48             canvas.DrawText(vericode, 30, 55, skp);
49             canvas.Save();
50         }
51 
52         using System.IO.MemoryStream ms = new System.IO.MemoryStream();
53         using SkiaSharp.SKManagedWStream ws = new SkiaSharp.SKManagedWStream(ms);
54         bmp.Encode(ws, SkiaSharp.SKEncodedImageFormat.Jpeg, 100);
55 
56         imgurl = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
57     }
58 
59 }