Skip to content

Commit 9a88fa6

Browse files
ArgoZhangArgoZhang
authored
feat(ImageCropper): add Preview parameter (#6177)
* refactor: bump version 9.0.2 * doc: 增加预览功能 * doc: 增加文档
1 parent 2e6e63c commit 9a88fa6

File tree

5 files changed

+41
-23
lines changed

5 files changed

+41
-23
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<PackageReference Include="BootstrapBlazor.Html2Image" Version="9.0.2" />
4444
<PackageReference Include="BootstrapBlazor.Html2Pdf" Version="9.0.2" />
4545
<PackageReference Include="BootstrapBlazor.IconPark" Version="9.0.3" />
46-
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.1" />
46+
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="9.0.2" />
4747
<PackageReference Include="BootstrapBlazor.IP2Region" Version="9.0.1" />
4848
<PackageReference Include="BootstrapBlazor.JitsiMeet" Version="9.0.0" />
4949
<PackageReference Include="BootstrapBlazor.JuHeIpLocatorProvider" Version="9.0.0" />

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

Lines changed: 30 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,50 @@
77
<PackageTips Name="BootstrapBlazor.ImageCropper" />
88

99
<DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
10-
<ImageCropper @ref="_cropper" Url="@_images[0]"></ImageCropper>
10+
<ImageCropper @ref="_cropper" Url="@_images[0]" Options="_roundOptions1"></ImageCropper>
1111
<section ignore>
1212
<BootstrapInputGroup>
13-
<Button Text="OK" OnClick="Crop" />
14-
<Button Text="@Localizer["ImageCropperResetText"]" OnClick="_cropper.Reset" />
15-
<Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace" />
16-
<Button Text="@Localizer["ImageCropperRotateText"]" OnClick="Rotate" />
17-
<Button Text="@Localizer["ImageCropperEnableText"]" OnClick="_cropper.Enable" />
18-
<Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable" />
19-
<Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear" />
13+
<Button Text="OK" OnClick="Crop"></Button>
14+
<Button Text="@Localizer["ImageCropperResetText"]" OnClick="_cropper.Reset"></Button>
15+
<Button Text="@Localizer["ImageCropperReplaceText"]" OnClick="OnClickReplace"></Button>
16+
<Button Text="@Localizer["ImageCropperRotateText"]" OnClick="Rotate"></Button>
17+
<Button Text="@Localizer["ImageCropperEnableText"]" OnClick="_cropper.Enable"></Button>
18+
<Button Text="@Localizer["ImageCropperDisabledText"]" OnClick="_cropper.Disable"></Button>
19+
<Button Text="@Localizer["ImageCropperClearText"]" OnClick="_cropper.Clear"></Button>
2020
</BootstrapInputGroup>
21+
22+
<div class="d-flex mt-3" style="gap: 0.5rem;">
23+
<div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-lg"></div>
24+
<div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-md"></div>
25+
<div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-sm"></div>
26+
<div class="bb-cropper-preview bb-cropper-preview1 bb-cropper-preview-xs"></div>
27+
</div>
28+
2129
@if (!string.IsNullOrEmpty(_base64String))
2230
{
23-
<img src="@_base64String" style="width: 240px;" />
24-
<Textarea Value="@_base64String" rows="3" class="mt-3" />
31+
<img src="@_base64String" style="width: 240px; margin-top: 1rem;" />
32+
<Textarea Value="@_base64String" rows="3" class="mt-3"></Textarea>
2533
}
2634
</section>
2735
</DemoBlock>
2836

29-
<DemoBlock Title="@Localizer["ImageCropperNormalText"]" Introduction="@Localizer["ImageCropperNormalIntro"]" Name="Normal">
30-
<ImageCropper @ref="_roundCropper" Url="@_images[0]" CropperShape="ImageCropperShape.Round" Options="_roundOptions" />
37+
<DemoBlock Title="@Localizer["ImageCropperRoundText"]" Introduction="@Localizer["ImageCropperRoundIntro"]" Name="Round">
38+
<ImageCropper @ref="_roundCropper" Url="@_images[0]" Options="_roundOptions2"></ImageCropper>
3139
<section ignore>
3240
<BootstrapInputGroup>
33-
<Button Text="OK" OnClick="RoundCrop" />
41+
<Button Text="OK" OnClick="RoundCrop"></Button>
3442
</BootstrapInputGroup>
43+
44+
<div class="d-flex mt-3" style="gap: 0.5rem;">
45+
<div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-lg"></div>
46+
<div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-md"></div>
47+
<div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-sm"></div>
48+
<div class="bb-cropper-preview bb-cropper-preview-round bb-cropper-preview-xs"></div>
49+
</div>
50+
3551
@if (!string.IsNullOrEmpty(_base64String2))
3652
{
37-
<img src="@_base64String2" style="width: 240px;" />
53+
<img src="@_base64String2" style="width: 240px; margin-top: 1rem;" />
3854
}
3955
</section>
4056
</DemoBlock>

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ public partial class ImageCroppers
2222

2323
private string? _base64String2;
2424

25-
private readonly ImageCropperOption _roundOptions = new() { IsRound = true, Radius = "50%", AspectRatio = 3/4f };
25+
private readonly ImageCropperOption _roundOptions1 = new() { AspectRatio = 16 / 9f, Preview = ".bb-cropper-preview1" };
26+
27+
private readonly ImageCropperOption _roundOptions2 = new() { IsRound = true, Preview = ".bb-cropper-preview-round" };
2628

2729
/// <summary>
2830
/// <inheritdoc/>
@@ -56,11 +58,7 @@ private async Task RoundCrop()
5658

5759
private Task Rotate() => _cropper.Rotate(90);
5860

59-
/// <summary>
60-
/// GetAttributes
61-
/// </summary>
62-
/// <returns></returns>
63-
protected AttributeItem[] GetAttributes() =>
61+
private AttributeItem[] GetAttributes() =>
6462
[
6563
new()
6664
{

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6679,7 +6679,9 @@
66796679
"BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
66806680
"Title": "Image cropper",
66816681
"ImageCropperNormalText": "Basic usage",
6682-
"ImageCropperNormalIntro": "Url parameter setting image",
6682+
"ImageCropperNormalIntro": "The URL of the image can be set by setting the <code>Url</code> parameter. The cropping ratio can be set by setting <code>ImageCropperOption.AspectRatio=16/9f</code>. <code>1</code> is a square.",
6683+
"ImageCropperRoundText": "Round",
6684+
"ImageCropperRoundIntro": "Set the cropping mode to circular by setting the <code>IsRound</code> parameter",
66836685
"ImageCropperResetText": "Reset",
66846686
"ImageCropperReplaceText": "Replace",
66856687
"ImageCropperRotateText": "Rotate",

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6679,7 +6679,9 @@
66796679
"BootstrapBlazor.Server.Components.Samples.ImageCroppers": {
66806680
"Title": "ImageCropper 图像裁剪",
66816681
"ImageCropperNormalText": "基础用法",
6682-
"ImageCropperNormalIntro": "Url 参数设置图片",
6682+
"ImageCropperNormalIntro": "通过设置 <code>Url</code> 参数设置图片地址，可通过设置 <code>ImageCropperOption.AspectRatio=16/9f</code> 设置裁剪框比例，<code>1</code> 时为正方形",
6683+
"ImageCropperRoundText": "圆角",
6684+
"ImageCropperRoundIntro": "通过设置 <code>IsRound</code> 参数设置裁剪方式为圆形",
66836685
"ImageCropperResetText": "复位",
66846686
"ImageCropperReplaceText": "替换",
66856687
"ImageCropperRotateText": "旋转",

0 commit comments

Comments
 (0)