doc: 更新示例

Author: ArgoZhang

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

@@ -17,12 +17,20 @@
             <Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable" />
             <Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear" />
         </BootstrapInputGroup>
-        <Textarea Value="@_base64String" rows="3" class="mt-3" />
+        @if (!string.IsNullOrEmpty(_base64String))
+        {
+            <img src="@_base64String" style="width: 240px;" />
+            <Textarea Value="@_base64String" rows="3" class="mt-3" />
+        }
     </section>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper Url="@images[0]" CropperShape="ImageCropperShape.Round" />
+    <ImageCropper Url="@images[0]" CropperShape="ImageCropperShape.Round" OnCropAsync="OnCropAsync" />
+    @if (!string.IsNullOrEmpty(_base64String2))
+    {
+        <img src="@_base64String2" style="width: 240px;" />
+    }
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

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

@@ -17,6 +17,8 @@ public partial class ImageCroppers
 
     private string? _base64String;
 
+    private string? _base64String2;
+
     private async Task OnClickReplace()
     {
         index = index == 0 ? 1 : 0;
@@ -28,6 +30,13 @@ private async Task Crop()
         _base64String = await _cropper.Crop();
     }
 
+    private Task OnCropAsync(ImageCropperResult result)
+    {
+        _base64String2 = result.Data;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
     private Task Rotate() => _cropper.Rotate(90);
 
     /// <summary>