feat: 增加圆形头像示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor

@@ -26,11 +26,16 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper Url="@images[0]" CropperShape="ImageCropperShape.Round" OnCropAsync="OnCropAsync" />
-    @if (!string.IsNullOrEmpty(_base64String2))
-    {
-        <img src="@_base64String2" style="width: 240px;" />
-    }
+    <ImageCropper @ref="_roundCropper" Url="@images[0]" CropperShape="ImageCropperShape.Round" Options="_roundOptions" />
+    <section ignore>
+        <BootstrapInputGroup>
+            <Button Text="OK" OnClick="RoundCrop" />
+        </BootstrapInputGroup>
+        @if (!string.IsNullOrEmpty(_base64String2))
+        {
+            <img src="@_base64String2" style="width: 240px;" />
+        }
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor.cs

@@ -11,6 +11,8 @@ public partial class ImageCroppers
 {
     private ImageCropper _cropper = default!;
 
+    private ImageCropper _roundCropper = default!;
+
     private readonly string[] images = ["./images/picture.jpg", "./images/ImageList2.jpeg"];
 
     private int index = 0;
@@ -19,6 +21,8 @@ public partial class ImageCroppers
 
     private string? _base64String2;
 
+    private ImageCropperOption _roundOptions = new() { IsRound = true, Radius = "50%" };
+
     private async Task OnClickReplace()
     {
         index = index == 0 ? 1 : 0;
@@ -30,11 +34,9 @@ private async Task Crop()
         _base64String = await _cropper.Crop();
     }
 
-    private Task OnCropAsync(ImageCropperResult result)
+    private async Task RoundCrop()
     {
-        _base64String2 = result.Data;
-        StateHasChanged();
-        return Task.CompletedTask;
+        _base64String2 = await _roundCropper.Crop();
     }
 
     private Task Rotate() => _cropper.Rotate(90);