feat: 增加 ImageCropperData 结构体

Author: ArgoZhang

src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs

@@ -34,7 +34,7 @@ public partial class ImageCropper
     /// 获得/设置 剪裁调整结束回调方法
     /// </summary>
     [Parameter]
-    public Func<Task>? OnCropEndAsync { get; set; }
+    public Func<ImageCropperData, Task>? OnCropEndAsync { get; set; }
 
     /// <summary>
     /// 获取/设置 裁剪选项
@@ -170,11 +170,11 @@ public Task Disable()
     /// </summary>
     /// <returns></returns>
     [JSInvokable]
-    public async Task TriggerOnCropEndAsync()
+    public async Task TriggerOnCropEndAsync(ImageCropperData data)
     {
-        if(OnCropEndAsync != null)
+        if (OnCropEndAsync != null)
         {
-            await Task.CompletedTask;
+            await OnCropEndAsync(data);
         }
     }
 }

src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js

@@ -11,7 +11,18 @@ export async function init(id, invoke, options) {
     }
 
     const image = el.querySelector(".bb-cropper-image");
-    const cropper = new Cropper(image, getOptions(options.options));
+    const { options: op, triggerOnCropEndAsync } = options;
+    if (triggerOnCropEndAsync) {
+        let cropData = null;
+        op.cropend = () => {
+            invoke.invokeMethodAsync(triggerOnCropEndAsync, cropData);
+            cropData = null;
+        }
+        op.crop = e => {
+            cropData = e.detail;
+        }
+    }
+    const cropper = new Cropper(image, getOptions(op));
 
     Data.set(id, { el, invoke, options, cropper });
 }

src/components/BootstrapBlazor.ImageCropper/ImageCropperData.cs

@@ -0,0 +1,46 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 裁切数据实体类
+/// </summary>
+public struct ImageCropperData
+{
+    /// <summary>
+    /// 获得/设置 裁剪框高度值
+    /// </summary>
+    public float Height { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框宽度值
+    /// </summary>
+    public float Width { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框 X 值
+    /// </summary>
+    public float X { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框 Y 值
+    /// </summary>
+    public float Y { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框旋转角度值
+    /// </summary>
+    public float Rotate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框 X 轴缩放值
+    /// </summary>
+    public float ScaleX { get; set; }
+
+    /// <summary>
+    /// 获得/设置 裁剪框 Y 轴缩放值
+    /// </summary>
+    public float ScaleY { get; set; }
+}