Skip to content

Commit 3b52f1e

Browse files
PrashanthSundharPrashanthSundhar
authored
Merge branch 'hotfix/hotfix-v27.1.48' into 189530
2 parents 544a0a3 + a1657ca commit 3b52f1e

22 files changed

+798
-17
lines changed

‎blazor-toc.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3101,6 +3101,13 @@
31013101
<li> <a href="/blazor/image-editor/redact">Redact</a></li>
31023102
<li> <a href="/blazor/image-editor/localization">Localization</a></li>
31033103
<li> <a href="/blazor/image-editor/accessibility">Accessibility</a></li>
3104+
<li>How To
3105+
<ul>
3106+
<li> <a href="/blazor/input-mask/how-to/clear-image">Clear an Image</a></li>
3107+
<li> <a href="/blazor/input-mask/how-to/render-dialog">Render Dialog in Image Editor</a></li>
3108+
<li> <a href="/blazor/input-mask/how-to/reset"></a>Reset an image</li>
3109+
</ul>
3110+
</li>
31043111
<li>
31053112
<a href="/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html"> API Reference</a>
31063113
</li>
@@ -3418,8 +3425,6 @@
34183425
<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
34193426
</li>
34203427
<li> <a href="/blazor/multicolumn-combobox/column">Columns</a></li>
3421-
<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
3422-
34233428
<li>
34243429
<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
34253430
</li>
@@ -3429,13 +3434,16 @@
34293434
<li>
34303435
<a href="/blazor/multicolumn-combobox/custom-value">Custom Value</a>
34313436
</li>
3437+
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34323438
<li> <a href="/blazor/multicolumn-combobox/paging">Paging</a></li>
3439+
<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
3440+
<li><a href="/blazor/multicolumn-combobox/grid-settings">Grid Settings</a></li>
3441+
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
3442+
<li> <a href="/blazor/multicolumn-combobox/template">Templates</a></li>
34333443
<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
34343444
<li> <a href="/blazor/multicolumn-combobox/style">Style and Appearance</a></li>
3435-
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34363445
<li><a href="/blazor/multicolumn-combobox/localization">Localization</a></li>
3437-
<li><a href="/blazor/multicolumn-combobox/grid-settings">Grid Settings</a></li>
3438-
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
3446+
<li> <a href="/blazor/multicolumn-combobox/accessibility">Accessibility</a></li>
34393447
<li> <a href="/blazor/multicolumn-combobox/form-validation">Form Validation</a></li>
34403448
</ul>
34413449
</li>

‎blazor/image-editor/annotation.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -656,3 +656,33 @@ In the following example, you can use the [`DrawImageAsync`](https://help.syncfu
656656
```
657657

658658
![Blazor Image Editor with Add Image in an image](./images/blazor-image-editor-add-image.png)
659+
660+
### Customize Default Stroke Color for Shapes
661+
662+
We provide default settings for stroke color, stroke width, fill color, and other customizations. If users wish to modify only the default options while preserving their previously selected customizations, they can do so by utilizing the [`ShapeChanging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html) event. Within this event, users can update the values in the [`CurrentShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings) object to apply their own preferences instead of the defaults. This approach allows conditional updates to the [`CurrentShapeSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ShapeChangeEventArgs.html#Syncfusion_Blazor_ImageEditor_ShapeChangeEventArgs_CurrentShapeSettings), ensuring that only the desired defaults are changed while maintaining the other settings.
663+
664+
```cshtml
665+
@using Syncfusion.Blazor.ImageEditor
666+
667+
<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
668+
<ImageEditorEvents Created="CreatedAsync" ShapeChanging="ShapeChangingAsync"></ImageEditorEvents>
669+
</SfImageEditor>
670+
671+
@code {
672+
SfImageEditor ImageEditor;
673+
private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
674+
675+
private async void CreatedAsync()
676+
{
677+
await ImageEditor.OpenAsync("nature.png");
678+
}
679+
680+
private async void ShapeChangingAsync(ShapeChangingEventArgs args)
681+
{
682+
if (args.action === "insert" && args.currentShapeSettings?.type === "FreehandDraw") {
683+
args.currentShapeSettings.strokeColor = "red";
684+
}
685+
}
686+
}
687+
```
688+
![Blazor Image Editor with Default Color](./images/blazor-image-editor-default-stroke-color.jpeg)

‎blazor/image-editor/how-to/clear-image.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
layout: post
3+
title: Clear an Image with Blazor Image Editor Component | Syncfusion
4+
description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Image Editor
7+
documentation: ug
8+
---
9+
10+
# Clear an Image in the Blazor Image Editor component
11+
12+
The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection.
13+
14+
```cshtml
15+
@using Syncfusion.Blazor.ImageEditor
16+
@using Syncfusion.Blazor.Buttons
17+
18+
<div style="padding-bottom: 15px">
19+
<SfButton OnClick="ClearImageAsync">Clear Image</SfButton>
20+
</div>
21+
<SfImageEditor @ref="ImageEditor" Height="400">
22+
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
23+
</SfImageEditor>
24+
25+
@code {
26+
SfImageEditor ImageEditor;
27+
28+
private async void OpenAsync()
29+
{
30+
await ImageEditor.OpenAsync("nature.png");
31+
}
32+
33+
private async void ClearImageAsync()
34+
{
35+
await ImageEditor.ClearImageAsync();
36+
}
37+
}
38+
```

‎blazor/image-editor/how-to/render-dialog.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: Clear an Image with Blazor Image Editor Component | Syncfusion
4+
description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Image Editor
7+
documentation: ug
8+
---
9+
10+
# Render Image Editor in Dialog Component
11+
12+
Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page.
13+
14+
```cshtml
15+
@using Syncfusion.Blazor.ImageEditor
16+
@using Syncfusion.Blazor.Buttons
17+
@using Syncfusion.Blazor.Popups
18+
@using Syncfusion.Blazor.Inputs
19+
20+
<div style="padding-bottom: 15px">
21+
@if (this.ShowButton)
22+
{
23+
<SfButton OnClick="OpenDialogAsync">Open Image</SfButton>
24+
}
25+
</div>
26+
<SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
27+
<DialogTemplates>
28+
<Content>
29+
<div class="dialogContent">
30+
31+
<SfImageEditor @ref="ImageEditor" Height="400px">
32+
<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
33+
</SfImageEditor>
34+
</div>
35+
</Content>
36+
</DialogTemplates>
37+
<DialogEvents OnOpen="@BeforeDialogOpen" Closed="@DialogClosed"></DialogEvents>
38+
</SfDialog>
39+
40+
@code {
41+
private bool Visibility { get; set; } = false;
42+
private bool ShowButton { get; set; } = true;
43+
SfImageEditor ImageEditor;
44+
45+
private async void OpenDialogAsync()
46+
{
47+
this.Visibility = true;
48+
}
49+
50+
private async void OpenAsync()
51+
{
52+
await ImageEditor.OpenAsync("nature.png");
53+
}
54+
55+
private void BeforeDialogOpen(BeforeOpenEventArgs args)
56+
{
57+
this.ShowButton = false;
58+
}
59+
60+
private void DialogClosed(CloseEventArgs args)
61+
{
62+
this.ShowButton = true;
63+
}
64+
}
65+
```

‎blazor/image-editor/how-to/reset.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
layout: post
3+
title: Reset an Image with Blazor Image Editor Component | Syncfusion
4+
description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
5+
platform: Blazor
6+
control: Image Editor
7+
documentation: ug
8+
---
9+
10+
# Reset an image in the Blazor Image Editor component
11+
12+
The [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image.
13+
14+
By invoking the [`ResetAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ResetAsync) method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image.

‎blazor/image-editor/images/blazor-image-editor-add-watermark.jpeg‎

93.6 KB
Loading

‎blazor/image-editor/images/blazor-image-editor-base-image.jpeg‎

93.7 KB
Loading

‎blazor/image-editor/images/blazor-image-editor-clear-image.png‎

359 KB
Loading

‎blazor/image-editor/images/blazor-image-editor-custom-crop-ratio.jpeg‎

95.8 KB
Loading

‎blazor/image-editor/images/blazor-image-editor-custom-ratio.jpg‎

42.2 KB
Loading

0 commit comments

Comments
 (0)