Skip to content

Commit

Permalink
feat(ImageCropper): add ImageCropper component (#2511)
Browse files Browse the repository at this point in the history
* ImageCropper 图像裁剪组件

* doc: 更新示例

---------

Co-authored-by: Argo-AscioTech <argo@live.ca>
  • Loading branch information
densen2014 and ArgoZhang authored Dec 8, 2023
1 parent 17cfe48 commit 5f56486
Show file tree
Hide file tree
Showing 10 changed files with 159 additions and 6 deletions.
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<PackageReference Include="BootstrapBlazor.FontAwesome" Version="8.0.1" />
<PackageReference Include="BootstrapBlazor.Gantt" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.Html2Pdf" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="*" />
<PackageReference Include="BootstrapBlazor.Live2DDisplay" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.Markdown" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.MaterialDesign" Version="8.0.0" />
Expand All @@ -50,7 +51,7 @@
<PackageReference Include="BootstrapBlazor.MindMap" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.MouseFollower" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.OnScreenKeyboard" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.PdfReader" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.PdfReader" Version="8.0.1" />
<PackageReference Include="BootstrapBlazor.SignaturePad" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.Splitting" Version="8.0.0" />
<PackageReference Include="BootstrapBlazor.SummerNote" Version="8.0.1" />
Expand Down
1 change: 1 addition & 0 deletions src/BootstrapBlazor.Server/Components/Pages/Coms.razor
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@
<ComponentCard Text="@Localizer["FileViewerText"]" Image="FileViewer.jpg" Url="file-viewer"></ComponentCard>
<ComponentCard Text="@Localizer["WebSerialText"]" Image="WebSerial.jpg" Url="web-serial"></ComponentCard>
<ComponentCard Text="@Localizer["WebSpeechText"]" Image="WebSpeech.jpg" Url="web-speech"></ComponentCard>
<ComponentCard Text="@Localizer["ImageCropperText"]" Image="ImageCropper.jpg" Url="image-cropper"></ComponentCard>
</ComponentCategory>

<ComponentCategory Text="@Localizer["Text6"]">
Expand Down
20 changes: 20 additions & 0 deletions src/BootstrapBlazor.Server/Components/Samples/ImageCroppers.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@page "/image-cropper"
@inject IStringLocalizer<ImageCroppers> Localizer

<h3>@Localizer["Title"]</h3>

<PackageTips Name="BootstrapBlazor.ImageCropper" />

<DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
<ImageCropper @ref="Cropper" Url="@images[0]" DefaultButton="false" />
<section ignore>
<BootstrapInputGroup class="mb-3">
<Button Text="OK" OnClick="(async () => Base64 = await Cropper.Crop())" />
<Button Text="@Localizer["ImageCropperResetText"]" OnClick="Cropper.Reset" />
<Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace" />
</BootstrapInputGroup>
<Textarea Value="@Base64" rows="3" />
</section>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// 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/

using System.ComponentModel;

namespace BootstrapBlazor.Server.Components.Samples;

/// <summary>
/// ImageCroppers
/// </summary>
public partial class ImageCroppers
{

[NotNull]
ImageCropper? Cropper { get; set; }

private string[] images = ["./images/picture.jpg", "./images/ImageList2.jpeg"];

private int index = 0;

private string? Base64 { get; set; }

private async Task OnClickReplace()
{
index = index == 0 ? 1 : 0;
await Cropper.Replace(images[index]);
}

/// <summary>
/// GetAttributes
/// </summary>
/// <returns></returns>
protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new()
{
Name = "Url",
Description = Localizer["AttributesImageCropperUrl"],
Type = "string?",
ValueList = "-",
DefaultValue = "-"
},
new()
{
Name = "DefaultButton",
Description = Localizer["AttributesImageCropperDefaultButton"],
Type = "bool",
ValueList = "-",
DefaultValue = "true"
},
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",
ValueList = "-",
DefaultValue = "-"
},
new()
{
Name = "Crop()",
Description = Localizer["AttributesImageCropperCrop"],
Type = "Task",
ValueList = "-",
DefaultValue = "-"
},
new()
{
Name = "CropToStream()",
Description = Localizer["AttributesImageCropperCropToStream"],
Type = "Task",
ValueList = "-",
DefaultValue = "-"
},
};
}
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,11 @@ void AddData(DemoMenuItem item)
Url = "image-viewer"
},
new()
{
Text = Localizer["ImageCropper"],
Url = "image-cropper"
},
new()
{
IsNew = true,
Text = Localizer["MindMap"],
Expand Down
20 changes: 18 additions & 2 deletions src/BootstrapBlazor.Server/Locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1631,7 +1631,8 @@
"FileViewerText": "FileViewer",
"WebSerialText": "WebSerial",
"MindMapText": "MindMap",
"WebSpeechText": "WebSpeech"
"WebSpeechText": "WebSpeech",
"ImageCropperText": "ImageCropper"
},
"BootstrapBlazor.Server.Components.Pages.Breakpoints": {
"Heading": "Breakpoints",
Expand Down Expand Up @@ -4526,7 +4527,8 @@
"JSExtension": "JSRuntime Extensions",
"Clipboard": "Clipboard Service",
"CodeEditor": "CodeEditor",
"Gantt": "Gantt"
"Gantt": "Gantt",
"ImageCropper": "ImageCropper"
},
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
"TablesHeaderTitle": "Header grouping function",
Expand Down Expand Up @@ -6023,5 +6025,19 @@
"AttrOnProgressChanged": "A callback that is triggered when a task progress is dragged",
"AttrOption": "Configuration items",
"AttrMethod": "Change the Gantt chart view"
},
"BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
"Title": "Image cropper",
"ImageCropperNormalText": "Basic usage",
"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"
}
}
20 changes: 18 additions & 2 deletions src/BootstrapBlazor.Server/Locales/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -1631,7 +1631,8 @@
"FileViewerText": "文件预览器 FileViewer",
"WebSerialText": "串口读写 WebSerial",
"MindMapText": "思维导图 Mind Map",
"WebSpeechText": "语音识别/合成 WebSpeech"
"WebSpeechText": "语音识别/合成 WebSpeech",
"ImageCropperText": "图像裁剪 ImageCropper"
},
"BootstrapBlazor.Server.Components.Pages.Breakpoints": {
"Heading": "断点",
Expand Down Expand Up @@ -4526,7 +4527,8 @@
"JSExtension": "JSRuntime 扩展",
"Clipboard": "剪切板服务",
"CodeEditor": "代码编辑器 CodeEditor",
"Gantt": "甘特图 Gantt"
"Gantt": "甘特图 Gantt",
"ImageCropper": "图像裁剪 ImageCropper"
},
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
"TablesHeaderTitle": "表头分组功能",
Expand Down Expand Up @@ -6023,5 +6025,19 @@
"AttrOnProgressChanged": "拖动任务进度时触发的回调",
"AttrOption": "配置项",
"AttrMethod": "改变甘特图视图"
},
"BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
"Title": "ImageCropper 图像裁剪",
"ImageCropperNormalText": "基础用法",
"ImageCropperNormalIntro": "Url 参数设置图片",
"ImageCropperResetText": "复位",
"ImageCropperReplaceText": "替换",
"AttributesImageCropperUrl": "图片URL 或 Base64 dataurl",
"AttributesImageCropperDefaultButton": "显示默认按钮",
"AttributesImageCropperPreview": "显示剪裁后预览",
"AttributesImageCropperOnResult": "剪裁结果 Stream 回调方法",
"AttributesImageCropperOnBase64Result": "剪裁结果 base64 回调方法",
"AttributesImageCropperCrop": "剪裁,返回 base64, 并执行 OnResult/OnBase64Result 回调",
"AttributesImageCropperCropToStream": "剪裁,返回 Stream"
}
}
3 changes: 2 additions & 1 deletion src/BootstrapBlazor.Server/docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,8 @@
"table/virtualization": "Table\\TablesVirtualization",
"table/wrap": "Table\\TablesWrap",
"js-extensions": "JSRuntimeExtensions",
"clipboard-service": "Clipboards"
"clipboard-service": "Clipboards",
"image-cropper": "ImageCroppers"
},
"video": {
"autorefresh": "BV1ap4y1x7Qn?p=8",
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5f56486

Please sign in to comment.