diff --git a/blazor/image-editor/how-to/clear-image.md b/blazor/image-editor/how-to/clear-image.md index 1fe69261e8..bf4a911539 100644 --- a/blazor/image-editor/how-to/clear-image.md +++ b/blazor/image-editor/how-to/clear-image.md @@ -1,7 +1,7 @@ --- 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 @@ -9,7 +9,7 @@ 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 @@ -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) \ No newline at end of file +![Blazor Image Editor clearing the image](../images/blazor-image-editor-clear-image.jpg) \ No newline at end of file diff --git a/blazor/image-editor/how-to/render-dialog.md b/blazor/image-editor/how-to/render-dialog.md index 45e1db9d6a..bf371930c1 100644 --- a/blazor/image-editor/how-to/render-dialog.md +++ b/blazor/image-editor/how-to/render-dialog.md @@ -1,7 +1,7 @@ --- 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 @@ -9,7 +9,7 @@ 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 @@ -23,44 +23,45 @@ Rendering the Image Editor in a dialog involves displaying the image editor comp Open Image } - + +
- +
- @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) \ No newline at end of file +![Blazor Image Editor rendered in a dialog](../images/blazor-image-editor-dialog.jpg) \ No newline at end of file diff --git a/blazor/image-editor/how-to/reset.md b/blazor/image-editor/how-to/reset.md index d8b385126c..5891d76c55 100644 --- a/blazor/image-editor/how-to/reset.md +++ b/blazor/image-editor/how-to/reset.md @@ -1,7 +1,7 @@ --- 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 @@ -9,6 +9,6 @@ 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. \ No newline at end of file +Invoking the `ResetAsync` method discards all modifications and restores the image to its initial state, enabling a clean restart of the editing process. \ No newline at end of file diff --git a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg index d3fac69d34..89e0e753a6 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-clear-image.jpg and b/blazor/image-editor/images/blazor-image-editor-clear-image.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.jpg b/blazor/image-editor/images/blazor-image-editor-resize.jpg new file mode 100644 index 0000000000..7ae9df6a9c Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-resize.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-resize.png b/blazor/image-editor/images/blazor-image-editor-resize.png deleted file mode 100644 index cc0ea39490..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-resize.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg new file mode 100644 index 0000000000..315d29b056 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-undo-redo.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-undo-redo.png b/blazor/image-editor/images/blazor-image-editor-undo-redo.png deleted file mode 100644 index 61da88b7f6..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-undo-redo.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-z-order.jpg b/blazor/image-editor/images/blazor-image-editor-z-order.jpg index dc79249e53..c5942a8d6c 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-z-order.jpg and b/blazor/image-editor/images/blazor-image-editor-z-order.jpg differ diff --git a/blazor/image-editor/resize.md b/blazor/image-editor/resize.md index 12775e7c19..03d237bb02 100644 --- a/blazor/image-editor/resize.md +++ b/blazor/image-editor/resize.md @@ -1,7 +1,7 @@ --- 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 @@ -9,22 +9,22 @@ 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 @@ -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. \ No newline at end of file +- [`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. \ No newline at end of file diff --git a/blazor/image-editor/undo-redo.md b/blazor/image-editor/undo-redo.md index 275543a034..d00b1f8534 100644 --- a/blazor/image-editor/undo-redo.md +++ b/blazor/image-editor/undo-redo.md @@ -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 @@ -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) diff --git a/blazor/image-editor/z-order.md b/blazor/image-editor/z-order.md index 5e55aae56f..55db766b69 100644 --- a/blazor/image-editor/z-order.md +++ b/blazor/image-editor/z-order.md @@ -1,7 +1,7 @@ --- layout: post title: Z-order with Blazor Image Editor Component | Syncfusion -description: Checkout the Z-order in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Z-order support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,20 +9,16 @@ documentation: ug # Z-order in the Blazor Image Editor Component -We are excited to introduce `z-order` support in the Image Editor. It's a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. +The Image Editor supports z-order control to manage the stacking order of annotations. This capability is useful when designing templates such as greeting cards or posters, where arranging multiple annotations in the correct order is essential. -Types of adjustment in the Image Editor `z-order` support. +The following z-order actions are available: -* [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) - Switch the selected annotation with the annotation one layer ahead of it. +- [Bring forward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_) – Swap the selected annotation with the one directly above it. +- [Send backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) – Swap the selected annotation with the one directly below it. +- [Bring to front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) – Move the selected annotation in front of all other annotations. +- [Send to back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) – Move the selected annotation behind all other annotations. -* [Sent Backward](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_) - Switch the selected annotation with the annotation one layer behind it. - -* [Bring to Front](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_) - Move the selected annotation to ahead of all other annotations. - -* [Send to Back](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_) - Move the selected annotation to behind all other annotations. - - -In the following example, you can use the `z-order` support. +The following example demonstrates z-order support: ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -79,4 +75,4 @@ In the following example, you can use the `z-order` support. } ``` -![Blazor Image Editor with Opening an image](./images/blazor-image-editor-z-order.jpg) +![Blazor Image Editor z-order example](./images/blazor-image-editor-z-order.jpg) \ No newline at end of file