doc: 更新 ImageCropper 示例

Author: ArgoZhang

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

@@ -6,15 +6,23 @@
 <PackageTips Name="BootstrapBlazor.ImageCropper" />
 
 <DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
-    <ImageCropper @ref="Cropper" Url="@images[0]" DefaultButton="false" />
+    <ImageCropper @ref="_cropper" Url="@images[0]"></ImageCropper>
     <section ignore>
         <BootstrapInputGroup>
-            <Button Text="OK" OnClick="(async () => Base64 = await Cropper.Crop())" />
-            <Button Text="@Localizer["ImageCropperResetText"]" OnClick="Cropper.Reset" />
+            <Button Text="OK" OnClick="Crop" />
+            <Button Text="@Localizer["ImageCropperResetText"]" OnClick="_cropper.Reset" />
             <Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace" />
+            <Button Text="@Localizer["ImageCropperRotateText"]" OnClick="Rotate" />
+            <Button Text="@Localizer["ImageCropperEnableText"]" OnClick="_cropper.Enable" />
+            <Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable" />
+            <Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear" />
         </BootstrapInputGroup>
-        <Textarea Value="@Base64" rows="3" class="mt-3" />
+        <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" />
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -5,26 +5,31 @@
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
-/// ImageCroppers
+/// ImageCropper 组件示例
 /// </summary>
 public partial class ImageCroppers
 {
+    private ImageCropper _cropper = default!;
 
-    [NotNull]
-    ImageCropper? Cropper { get; set; }
-
-    private string[] images = ["./images/picture.jpg", "./images/ImageList2.jpeg"];
+    private readonly string[] images = ["./images/picture.jpg", "./images/ImageList2.jpeg"];
 
     private int index = 0;
 
-    private string? Base64 { get; set; }
+    private string? _base64String;
 
     private async Task OnClickReplace()
     {
         index = index == 0 ? 1 : 0;
-        await Cropper.Replace(images[index]);
+        await _cropper.Replace(images[index]);
     }
 
+    private async Task Crop()
+    {
+        _base64String = await _cropper.Crop();
+    }
+
+    private Task Rotate() => _cropper.Rotate(90);
+
     /// <summary>
     /// GetAttributes
     /// </summary>
@@ -41,51 +46,35 @@ protected AttributeItem[] GetAttributes() =>
         },
         new()
         {
-            Name = "DefaultButton",
-            Description = Localizer["AttributesImageCropperDefaultButton"],
+            Name = "IsDisabled",
+            Description = Localizer["AttributesImageCropperIsDisabled"],
             Type = "bool",
-            ValueList = "-",
-            DefaultValue = "true"
+            ValueList = "true|false",
+            DefaultValue = "false"
         },
         new()
         {
-            Name = "Preview",
-            Description = Localizer["AttributesImageCropperPreview"],
-            Type = "bool",
-            ValueList = "-",
-            DefaultValue = "true"
-        },
-        new()
-        {
-            Name = "OnResult()",
-            Description = Localizer["AttributesImageCropperOnResult"],
-            Type = "Func",
-            ValueList = "-",
-            DefaultValue = "-"
-        },
-        new()
-        {
-            Name = "OnBase64Result()",
-            Description = Localizer["AttributesImageCropperOnBase64Result"],
-            Type = "Func",
+            Name = "OnCropAsync",
+            Description = Localizer["AttributesImageCropperOnCropAsync"],
+            Type = "Func<ImageCropperResult, Task>",
             ValueList = "-",
             DefaultValue = "-"
         },
         new()
         {
-            Name = "Crop()",
-            Description = Localizer["AttributesImageCropperCrop"],
-            Type = "Task",
+            Name = "Options",
+            Description = Localizer["AttributesImageCropperOptions"],
+            Type = "ImageCropperOption",
             ValueList = "-",
             DefaultValue = "-"
         },
         new()
         {
-            Name = "CropToStream()",
-            Description = Localizer["AttributesImageCropperCropToStream"],
-            Type = "Task",
+            Name = "CropperShape",
+            Description = Localizer["AttributesImageCropperShape"],
+            Type = "ImageCropperShape",
             ValueList = "-",
             DefaultValue = "-"
-        },
+        }
     ];
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -6499,13 +6499,15 @@
     "ImageCropperNormalIntro": "Url parameter setting image",
     "ImageCropperResetText": "Reset",
     "ImageCropperReplaceText": "Replace",
-    "AttributesImageCropperUrl": "Image URL or Base64 dataurl",
-    "AttributesImageCropperDefaultButton": "Show default button",
-    "AttributesImageCropperPreview": "Show preview after cropping",
-    "AttributesImageCropperOnResult": "Crop result Stream callback method",
-    "AttributesImageCropperOnBase64Result": "Crop result base64 callback method",
-    "AttributesImageCropperCrop": "Crop, return base64, and execute OnResult/OnBase64Result callback",
-    "AttributesImageCropperCropToStream": "Crop, return Stream"
+    "ImageCropperRotateText": "Rotate",
+    "ImageCropperEnableText": "Enable",
+    "ImageCropperDisabledText": "Disabled",
+    "ImageCropperClearText": "Clear",
+    "AttributesImageCropperUrl": "Image Url",
+    "AttributesImageCropperIsDisabled": "Whether the component is disabled",
+    "AttributesImageCropperOnCropAsync": "Crop result callback method",
+    "AttributesImageCropperOptions": "Crop option",
+    "AttributesImageCropperShape": "Crop shape"
   },
   "BootstrapBlazor.Server.Components.Samples.Translators": {
     "TranslatorsTitle": "Azure Translator",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -6499,13 +6499,15 @@
     "ImageCropperNormalIntro": "Url 参数设置图片",
     "ImageCropperResetText": "复位",
     "ImageCropperReplaceText": "替换",
-    "AttributesImageCropperUrl": "图片URL 或 Base64 dataurl",
-    "AttributesImageCropperDefaultButton": "显示默认按钮",
-    "AttributesImageCropperPreview": "显示剪裁后预览",
-    "AttributesImageCropperOnResult": "剪裁结果 Stream 回调方法",
-    "AttributesImageCropperOnBase64Result": "剪裁结果 base64 回调方法",
-    "AttributesImageCropperCrop": "剪裁,返回 base64, 并执行 OnResult/OnBase64Result 回调",
-    "AttributesImageCropperCropToStream": "剪裁,返回 Stream"
+    "ImageCropperRotateText": "旋转",
+    "ImageCropperEnableText": "启用",
+    "ImageCropperDisabledText": "禁用",
+    "ImageCropperClearText": "清除",
+    "AttributesImageCropperUrl": "图片地址",
+    "AttributesImageCropperIsDisabled": "是否被禁用",
+    "AttributesImageCropperOnCropAsync": "剪裁结果回调方法",
+    "AttributesImageCropperOptions": "裁剪选项",
+    "AttributesImageCropperShape": "裁剪形状"
   },
   "BootstrapBlazor.Server.Components.Samples.Translators": {
     "TranslatorsTitle": "AzureTranslator 翻译服务",