feat(ImageCropper): add OnCropChangedAsync parameter (#6179)

* chore: bump version 9.0.3

* feat(ImageCropper): add OnCropChangedAsync parameter

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -43,7 +43,7 @@
     <PackageReference Include="BootstrapBlazor.Html2Image" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.Html2Pdf" Version="9.0.2" />
     <PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.3" />
-    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.2" />
+    <PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.IP2Region" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.JitsiMeet" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.JuHeIpLocatorProvider" Version="9.0.0" />

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

@@ -7,7 +7,7 @@
 <PackageTips Name="BootstrapBlazor.ImageCropper" />
 
 <DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper @ref="_cropper" Url="@_images[0]" Options="_roundOptions1"></ImageCropper>
+    <ImageCropper @ref="_cropper" Url="@_images[0]" Options="_roundOptions1" OnCropChangedAsync="OnCropChangedAsync"></ImageCropper>
     <section ignore>
         <BootstrapInputGroup>
             <Button Text="OK" OnClick="Crop"></Button>
@@ -26,6 +26,58 @@
             <div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-xs"></div>
         </div>
 
+        <div class="row g-3 mt-3">
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="X"></BootstrapInputGroupLabel>
+                    <Display Value="_data.X"></Display>
+                    <BootstrapInputGroupLabel DisplayText="px"></BootstrapInputGroupLabel>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Y"></BootstrapInputGroupLabel>
+                    <Display Value="_data.Y"></Display>
+                    <BootstrapInputGroupLabel DisplayText="px"></BootstrapInputGroupLabel>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Width"></BootstrapInputGroupLabel>
+                    <Display Value="_data.Width"></Display>
+                    <BootstrapInputGroupLabel DisplayText="px"></BootstrapInputGroupLabel>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Height"></BootstrapInputGroupLabel>
+                    <Display Value="_data.Height"></Display>
+                    <BootstrapInputGroupLabel DisplayText="px"></BootstrapInputGroupLabel>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Rotate"></BootstrapInputGroupLabel>
+                    <Display Value="_data.Rotate"></Display>
+                    <BootstrapInputGroupLabel DisplayText="deg"></BootstrapInputGroupLabel>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6 d-none d-sm-flex">
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ScaleX"></BootstrapInputGroupLabel>
+                    <Display Value="_data.ScaleX"></Display>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ScaleY"></BootstrapInputGroupLabel>
+                    <Display Value="_data.ScaleY"></Display>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+
         @if (!string.IsNullOrEmpty(_base64String))
         {
             <img src="@_base64String" style="width: 240px; margin-top: 1rem;" />

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

@@ -58,6 +58,14 @@ private async Task RoundCrop()
 
     private Task Rotate() => _cropper.Rotate(90);
 
+    private ImageCropperData _data = new();
+    private Task OnCropChangedAsync(ImageCropperData data)
+    {
+        _data = data;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
     private AttributeItem[] GetAttributes() =>
     [
         new()