Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions blazor/image-editor/how-to/clear-image.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Clear an Image with Blazor Image Editor Component | Syncfusion
description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
description: Learn how to clear an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---

# Clear an Image in the Blazor Image Editor component

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` 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.
The [ClearImageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ClearImageAsync) method clears the current image from the editor. This is useful when the component is rendered in a dialog: calling `ClearImageAsync` before closing the dialog prevents the previously loaded image from persisting when the dialog is reopened, ensuring a fresh state for a new selection.

```cshtml
@using Syncfusion.Blazor.ImageEditor
Expand Down Expand Up @@ -37,4 +37,4 @@ The [`ClearImageAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```

![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-clear-image.jpg)
![Blazor Image Editor clearing the image](../images/blazor-image-editor-clear-image.jpg)
31 changes: 16 additions & 15 deletions blazor/image-editor/how-to/render-dialog.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Clear an Image with Blazor Image Editor Component | Syncfusion
description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
title: Render Image Editor in a Dialog Component | Syncfusion
description: Render the Blazor Image Editor in a modal dialog for a focused, space-saving editing experience in Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---

# Render Image Editor in Dialog Component

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.
Rendering the Image Editor in a dialog displays the component within a modal window, enabling image editing in a pop-up interface. This approach helps maintain a clean layout and provides a focused editing experience without navigating away from the current page.

```cshtml
@using Syncfusion.Blazor.ImageEditor
Expand All @@ -23,44 +23,45 @@ Rendering the Image Editor in a dialog involves displaying the image editor comp
<SfButton OnClick="OpenDialogAsync">Open Image</SfButton>
}
</div>
<SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

<SfDialog MinHeight="400px" Width="340px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
<DialogTemplates>
<Content>
<div class="dialogContent">
<SfImageEditor @ref="ImageEditor" Height="400px">
<SfImageEditor @ref="ImageEditor" Height="300px">
</SfImageEditor>
</div>
</Content>
</DialogTemplates>
<DialogEvents OnOpen="@BeforeDialogOpen" Opened="OpenAsync" Closed="@DialogClosed"></DialogEvents>

</SfDialog>

@code {
private bool Visibility { get; set; } = false;
private bool ShowButton { get; set; } = true;
SfImageEditor ImageEditor;
SfImageEditor ImageEditor;

private async void OpenDialogAsync()
{
private void OpenDialogAsync()
{
this.Visibility = true;
}

private async void OpenAsync()
{
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
private async void OpenAsync()
{
await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
ImageEditor.RefreshAsync();
}

private void BeforeDialogOpen(BeforeOpenEventArgs args)
private void BeforeDialogOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args)
{
this.ShowButton = false;
}

private void DialogClosed(CloseEventArgs args)
private void DialogClosed(Syncfusion.Blazor.Popups.CloseEventArgs args)
{
this.ShowButton = true;
}
}
```

![Blazor Image Editor with Resize the custom selection](../images/blazor-image-editor-dialog.jpg)
![Blazor Image Editor rendered in a dialog](../images/blazor-image-editor-dialog.jpg)
8 changes: 4 additions & 4 deletions blazor/image-editor/how-to/reset.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Reset an Image with Blazor Image Editor Component | Syncfusion
description: Learn here all about Reset an image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
title: Reset an image in the Blazor Image Editor | Syncfusion
description: Learn how to reset an image in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---

# Reset an image in the Blazor Image Editor component

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.
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 changes made to an image and revert it to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and a return to the original, unmodified version is required.

By invoking the `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.
Invoking the `ResetAsync` method discards all modifications and restores the image to its initial state, enabling a clean restart of the editing process.
Binary file modified blazor/image-editor/images/blazor-image-editor-clear-image.jpg
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.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file modified blazor/image-editor/images/blazor-image-editor-z-order.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 19 additions & 19 deletions blazor/image-editor/resize.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
layout: post
title: Resizing with Blazor Image Editor Component | Syncfusion
description: Checkout the Resizing available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
description: Explore the resizing support in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---

# Resize in the Blazor Image Editor component

The resize feature in an Image Editor is a valuable tool that empowers users to modify the size or dimensions of an image to meet their specific requirements. Whether it's for printing, web display, or any other purpose, this feature allows users to tailor images to their desired specifications.
The resize feature adjusts the size or dimensions of an image to match specific requirements for printing, web display, or other use cases.

## Apply resize to the image

The Image Editor control includes a [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method, which allows you to adjust the size of an image. This method takes three parameters that define how the resizing should be carried out:
The Image Editor control provides the [`ImageResizeAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ImageResizeAsync_System_Int32_System_Int32_System_Boolean_) method to change image size. This method accepts three parameters that define the resizing behavior:

* width: Specifies the resizing width of the image.
- width: Sets the target width of the image.

* height: Specifies the resizing height of the image.
- height: Sets the target height of the image.

* isAspectRatio: Specifies a boolean value indicating whether the image should maintain its original aspect ratio during resizing.
* When set to `true`, the image maintains its original aspect ratio. The width is applied as specified, and the height is automatically adjusted to maintain the aspect ratio.
* When set to `false`, the image is resized according to the specified width and height, without maintaining the aspect ratio.
* The default value is `false`.
- isAspectRatio: Indicates whether to preserve the original aspect ratio.
- When `true`, the image maintains its original aspect ratio. The specified width is applied, and the height adjusts automatically.
- When `false`, the image resizes to the specified width and height without preserving the aspect ratio.
- The default value is `false`.

Here is an example of resizing the image using the `ImageResizeAsync` method.
Here is an example of resizing the image using the `ImageResizeAsync` method.

```cshtml
@using Syncfusion.Blazor.ImageEditor
Expand Down Expand Up @@ -60,22 +60,22 @@ Here is an example of resizing the image using the `ImageResizeAsync` method.
}
```

![Blazor Image Editor with Resize an image](./images/blazor-image-editor-resize.png)
![Blazor Image Editor with a resized image](./images/blazor-image-editor-resize.jpg)

## Resizing event

The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event is triggered when resizing the image. This event provides information encapsulated within an object, which includes details about the previous and current height and width of an image.
The [`ImageResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_ImageResizing) event triggers while an image is being resized and provides details about the previous and current dimensions.

The parameter available in ResizeEventArgs is,
Parameters available in [ImageResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html):

* [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) - The width of the image before resizing is performed.
- [`ImageResizeEventArgs.PreviousWidth`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousWidth) The width of the image before resizing.

* [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) - The height of the image before resizing is performed.
- [`ImageResizeEventArgs.PreviousHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_PreviousHeight) The height of the image before resizing.

* [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) - The width of the image after resizing is performed.
- [`ImageResizeEventArgs.Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Width) The width of the image after resizing.

* [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) - The width of the image after resizing is performed.
- [`ImageResizeEventArgs.Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Height) The height of the image after resizing.

* [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) - The type of resizing performed such as aspect ratio or non-aspect ratio.
- [`ImageResizeEventArgs.IsAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_IsAspectRatio) – Indicates whether the resizing preserved the aspect ratio.

* [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) - Specifies a boolean value to cancel the resizing action.
- [`ImageResizeEventArgs.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageResizeEventArgs.html#Syncfusion_Blazor_ImageEditor_ImageResizeEventArgs_Cancel) – A boolean value that cancels the resizing action when set to true.
20 changes: 10 additions & 10 deletions blazor/image-editor/undo-redo.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
layout: post
title: Undo Redo with Blazor Image Editor Component | Syncfusion
description: Checkout the Undo Redo available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
title: Undo and Redo with Blazor Image Editor Component | Syncfusion
description: Explore undo and redo features in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
platform: Blazor
control: Image Editor
documentation: ug
---

# Undo Redo in the Blazor Image Editor component
# Undo and redo in the Blazor Image Editor component

The undo and redo functionalities provide a way to reverse and repeat editing actions performed on an image. These features are essential for maintaining control and flexibility during the editing process.
The undo and redo functionalities enable reversing and reapplying editing actions performed on an image. These capabilities are essential for maintaining control and flexibility during the editing process.

In Blazor Image Editor component, the undo and redo history typically have a limited capacity, and the number of steps that can be stored is 16 steps, meaning that the editor keeps track of the most recent 16 actions performed on the image. Once the history reaches its maximum capacity, any new actions beyond the 16th step will result in the removal of the oldest action from the history.
In the Blazor Image Editor component, the undo and redo history has a fixed capacity of 16 steps. The editor tracks the most recent 16 actions performed on the image. When the history reaches its maximum capacity, any new action removes the oldest action from the history.

## Undo the action
## Undo the action

The undo action in an image editor allows users to revert the most recent editing action or a series of actions back to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, effectively restoring the image to its state before the action was performed. The undo action is useful for correcting mistakes, removing unwanted changes, or exploring different editing options without permanently altering the image.
The undo action reverts the most recent editing action or a series of actions to their previous state. When the undo command is triggered, the image editor undoes the last applied modification, restoring the image to its prior state. The undo action is useful for correcting mistakes, removing unwanted changes, or testing different editing options without permanently altering the image.

## Redo the action

The redo action in an image editor allows users to reapply previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, bringing the image back to the state it was in after the action was initially applied. The redo is useful when users want to repeat an action that was previously undone or restore changes that were temporarily reversed.
The redo action reapplies previously undone actions or modifications to the image. When the redo command is triggered, the image editor reapplies the last action that was undone, returning the image to the state it was in after the action was initially applied. The redo action is useful for repeating an action that was previously undone or restoring changes that were temporarily reversed.

Here is an example of undoing and redoing the action using the [`UndoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [`RedoAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method.
Here is an example of undoing and redoing the action using the [UndoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UndoAsync) and [RedoAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_RedoAsync) method.

```cshtml
@using Syncfusion.Blazor.ImageEditor
Expand Down Expand Up @@ -64,4 +64,4 @@ Here is an example of undoing and redoing the action using the [`UndoAsync`](htt
}
```

![Blazor Image Editor with Undo Redo an image](./images/blazor-image-editor-undo-redo.png)
![Blazor Image Editor showing undo and redo actions](./images/blazor-image-editor-undo-redo.jpg)
Loading