feat: 增加 OnCropEndAsync 回调方法

Author: ArgoZhang

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

@@ -3,6 +3,7 @@
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace BootstrapBlazor.Components;
 
@@ -29,6 +30,12 @@ public partial class ImageCropper
     [Parameter]
     public Func<ImageCropperResult, Task>? OnCropAsync { get; set; }
 
+    /// <summary>
+    /// 获得/设置 剪裁调整结束回调方法
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnCropEndAsync { get; set; }
+
     /// <summary>
     /// 获取/设置 裁剪选项
     /// </summary>
@@ -81,7 +88,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Options ?? new());
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        Options = Options ?? new(),
+        TriggerOnCropEndAsync = OnCropEndAsync != null ? nameof(TriggerOnCropEndAsync) : null,
+    });
 
     /// <summary>
     /// 剪裁方法 自动触发 <see cref="OnCropAsync"/> 回调方法
@@ -153,4 +164,17 @@ public Task Disable()
     /// <param name="angle">旋转角度</param>
     /// <returns></returns>
     public async Task Rotate(int angle) => await InvokeVoidAsync("rotate", Id, angle);
+
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerOnCropEndAsync()
+    {
+        if(OnCropEndAsync != null)
+        {
+            await Task.CompletedTask;
+        }
+    }
 }

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

@@ -2,7 +2,7 @@
 import Data from '../BootstrapBlazor/modules/data.js'
 import { addLink } from '../BootstrapBlazor/modules/utility.js'
 
-export async function init(id, options) {
+export async function init(id, invoke, options) {
     await addLink("./_content/BootstrapBlazor.ImageCropper/cropper.bundle.css");
 
     const el = document.getElementById(id);
@@ -11,9 +11,9 @@ export async function init(id, options) {
     }
 
     const image = el.querySelector(".bb-cropper-image");
-    const cropper = new Cropper(image, getOptions(options));
+    const cropper = new Cropper(image, getOptions(options.options));
 
-    Data.set(id, cropper);
+    Data.set(id, { el, invoke, options, cropper });
 }
 
 const getOptions = op => {
@@ -27,86 +27,110 @@ const getOptions = op => {
 }
 
 export function dispose(id) {
-    const cropper = Data.get(id);
+    const ic = Data.get(id);
     Data.remove(id);
 
-    if (cropper != null) {
-        cropper.destroy();
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.destroy();
+        }
     }
 }
 
 export function crop(id) {
     let ret = null;
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        const { isRound } = cropper.options;
-        cropper.crop();
-        let resultData = cropper.getCroppedCanvas();
-        if (isRound) {
-            resultData = getRoundCanvas(resultData);
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper, options } = ic;
+        if (cropper !== null) {
+            cropper.crop();
+            let resultData = cropper.getCroppedCanvas();
+
+            const { isRound } = options.options;
+            if (isRound) {
+                resultData = getRoundCanvas(resultData);
+            }
+            ret = resultData.toDataURL();
+            resultData = null;
         }
-        ret = resultData.toDataURL();
-        resultData = null;
     }
     return ret;
 }
 
 export function replace(id, url) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.replace(url);
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.replace(url);
+        }
     }
 }
 
 export function reset(id) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.reset();
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.reset();
+        }
     }
 }
 
 export function setDragMode(id, mode) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.setDragMode(mode);
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.setDragMode(mode);
+        }
     }
 }
 
 export function rotate(id, angle) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.rotate(angle);
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.rotate(angle);
+        }
     }
 }
 
 export function clear(id) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.clear();
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { cropper } = ic;
+        if (cropper) {
+            cropper.clear();
+        }
     }
 }
 
 export async function enable(id) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.enable();
-    }
-
-    const el = document.getElementById(id);
-    if (el) {
-        el.classList.remove("disabled");
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { el, cropper } = ic;
+        if (cropper) {
+            cropper.enable();
+        }
+        if (el) {
+            el.classList.remove("disabled");
+        }
     }
 }
 
 export async function disable(id) {
-    const cropper = Data.get(id);
-    if (cropper != null) {
-        cropper.disable();
-    }
-
-    const el = document.getElementById(id);
-    if (el) {
-        el.classList.add("disabled");
+    const ic = Data.get(id);
+    if (ic != null) {
+        const { el, cropper } = ic;
+        if (cropper) {
+            cropper.disable();
+        }
+        if (el) {
+            el.classList.add("disabled");
+        }
     }
 }