diff --git a/blazor/image-editor/accessibility.md b/blazor/image-editor/accessibility.md index 3d45a2c370..ae79e36b99 100644 --- a/blazor/image-editor/accessibility.md +++ b/blazor/image-editor/accessibility.md @@ -1,15 +1,15 @@ --- layout: post title: Accessibility in Blazor Image Editor component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Image Editor component and more. +description: Learn about accessibility support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor -control: Progress Button +control: Image Editor documentation: ug --- # Accessibility in Blazor Image Editor component -The Blazor Image Editor component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Image Editor component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Image Editor component is outlined below. @@ -39,25 +39,25 @@ The accessibility compliance for the Blazor Image Editor component is outlined b ## Keyboard interaction -The Blazor Image Editor component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. +The Blazor Image Editor component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component. | Windows | Mac | Actions | | --- | --- | --- | -| Ctrl + Z | ⌘ + Z | Undo the last user action. | -| Ctrl + Y | ⌘ + Y | Redo the last user action. | -| Ctrl + S | ⌘ + S | To save the Image. | -| Ctrl + O | ⌘ + O | To open the Image. | -| Delete | Delete | To delete the shape once the shape got selected through mouse click . | -| Enter | Enter | To apply Selection Crop or Image Resize. | -| Escape | Escape | To discard operations performed in the Image Editor, such as annotation drawings, crop selection, and more. | +| Ctrl + Z | ⌘ + Z | Undo the last action. | +| Ctrl + Y | ⌘ + Y | Redo the last action. | +| Ctrl + S | ⌘ + S | Save the image. | +| Ctrl + O | ⌘ + O | Open an image. | +| Delete | Delete | Delete the selected shape. | +| Enter | Enter | Apply selection crop or image resize. | +| Escape | Escape | Discard operations such as annotation drawings and crop selections. | ## Ensuring accessibility -The Blazor Image Editor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Image Editor component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests. -The accessibility compliance of the Blazor Image Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the accessibility of the Blazor Image Editor component with accessibility tools. +The accessibility compliance of the Blazor Image Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the Blazor Image Editor component with accessibility tools. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLfZMhEziJhvXKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md index 37adfee207..efe53d636f 100644 --- a/blazor/image-editor/image-restrictions.md +++ b/blazor/image-editor/image-restrictions.md @@ -1,7 +1,7 @@ --- layout: post title: Image Restrictions with Blazor Image Editor Component | Syncfusion -description: Checkout the Image Restrictions available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,15 +9,15 @@ documentation: ug # Image Restrictions in the Blazor Image Editor component -The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience. +The Image Editor supports restricting image uploads by file extension and by minimum and maximum file size using the [ImageEditorUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. When an uploaded image does not meet the configured criteria, the component displays an alert to guide the end user and maintain a smooth workflow. -`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions. +Note: File restrictions apply when opening images via the open method or the built-in uploader. If upload settings are not defined, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions, with no file size restrictions. ## Allowed image extensions -The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`, `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions. +Configure allowed file extensions for uploaded images using the [ImageEditorUploadSettings.AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property. This ensures that only supported formats—such as .jpg, .png, .svg, .webp, and .bmp—are processed, improving compatibility and preventing errors caused by unsupported file types. By default, the Image Editor allows .jpg, .png, .svg, .webp, and .bmp. -`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string. +Note: Specify allowed extensions as a comma-separated string, for example: '.jpg, .svg'. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. @@ -46,9 +46,9 @@ Here is an example of configuring image restrictions using the `ImageEditorUploa ## Minimum and maximum image size -The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed. +Set minimum and maximum upload size limits using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. These constraints enforce consistent input and prevent oversized or undersized files from being processed. -`Note:` Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply. +Note: When images are uploaded as base64 strings, file extension validation is bypassed; file size restrictions still apply. Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property. diff --git a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg index a4c7054275..7f9547315e 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg index 0551f2a81c..95a1173f43 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg and b/blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg new file mode 100644 index 0000000000..cb227691e9 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png b/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png deleted file mode 100644 index 3bccbdb8bc..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-quick-access-toolbar.png and /dev/null differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.jpg b/blazor/image-editor/images/blazor-image-editor-redact.jpg new file mode 100644 index 0000000000..64de0991ec Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-redact.jpg differ diff --git a/blazor/image-editor/images/blazor-image-editor-redact.png b/blazor/image-editor/images/blazor-image-editor-redact.png deleted file mode 100644 index e2b20c0982..0000000000 Binary files a/blazor/image-editor/images/blazor-image-editor-redact.png and /dev/null differ diff --git a/blazor/image-editor/localization.md b/blazor/image-editor/localization.md index 32b91c70a1..bad0747e6b 100644 --- a/blazor/image-editor/localization.md +++ b/blazor/image-editor/localization.md @@ -1,15 +1,14 @@ --- layout: post title: Localization with Blazor Image Editor Component | Syncfusion -description: Checkout the Localization available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- - # Localization in the Blazor Image Editor component -[Blazor Image editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. -N> You can also explore our [Blazor Image editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to know how to render and configure the image editor. \ No newline at end of file +N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor. \ No newline at end of file diff --git a/blazor/image-editor/quick-access.md b/blazor/image-editor/quick-access.md index 6c5c662e81..4b9773ce5a 100644 --- a/blazor/image-editor/quick-access.md +++ b/blazor/image-editor/quick-access.md @@ -1,41 +1,34 @@ --- layout: post title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion -description: Checkout the Quick Access Toolbar available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug --- -# Quick access toolbar in the Blazor Image Editor Component +# Quick Access Toolbar in the Blazor Image Editor Component -The quick access toolbars in the Image Editor play a vital role in facilitating interactions with annotations like Rectangle, Ellipse, Line, Arrow, and Path. These toolbars offer a diverse array of tools and options that can be tailored to match the specific requirements and preferences associated with each annotation type. The toolbar is only displayed when an annotation is selected, ensuring a focused and contextual user experience. +The quick access toolbars in the Image Editor facilitate interactions with annotations such as Rectangle, Ellipse, Line, Arrow, and Path. These toolbars provide a configurable set of tools and options tailored to each annotation type. The toolbar appears only when an annotation is selected, ensuring a focused and contextual editing experience. -The [`ShowQuickAccessToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls the visibility of the quick access toolbar. Users have the flexibility to enable or disable this toolbar, add or remove items, and create a personalized set of tools. +The [ShowQuickAccessToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls quick access toolbar visibility. The toolbar can be enabled or disabled, items can be added or removed, and a customized toolset can be configured. ## Add a custom toolbar item -The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [`QuickAccessToolbarOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar is opened, allowing you to modify its contents. To add additional toolbar items to the quick access toolbar, you can access the ToolbarItems property of the [`QuickAccessToolbarEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from the ToolbarItems property based on the Item property, you can customize the options available in the quick access toolbar according to your needs. This gives you the ability to extend the functionality of the quick access toolbar and provide additional tools and options for working with inserted annotations. +The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar opens, allowing modification of its contents. Additional toolbar items can be included by accessing the `ToolbarItems` property of the [QuickAccessToolbarEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from `ToolbarItems` based on the `Item` property, the quick access toolbar options can be customized to match specific requirements for working with inserted annotations. -Here is an example of adding the custom toolbar item to the quick access toolbar. +Here is an example of adding a custom toolbar item to the quick access toolbar. ```cshtml @using Syncfusion.Blazor.ImageEditor @using Syncfusion.Blazor.Navigations - + @code { SfImageEditor ImageEditor; - private List customToolbarItem = new List() - { - new ImageEditorToolbarItemModel { Name = "Annotation" }, - new ImageEditorToolbarItemModel { Name = "Confirm" }, - new ImageEditorToolbarItemModel { Name = "Reset" } - }; - private async void OpenAsync() { await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); @@ -48,4 +41,4 @@ Here is an example of adding the custom toolbar item to the quick access toolbar } ``` -![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.png) \ No newline at end of file +![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.jpg) \ No newline at end of file diff --git a/blazor/image-editor/redact.md b/blazor/image-editor/redact.md index 44004c3334..7533632d49 100644 --- a/blazor/image-editor/redact.md +++ b/blazor/image-editor/redact.md @@ -1,7 +1,7 @@ --- layout: post title: Redact with Blazor Image Editor Component | Syncfusion -description: Checkout the Redact available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +description: Explore the Redact support in the Blazor Image Editor component for Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,49 +9,49 @@ documentation: ug # Redact in the Blazor Image Editor component -The redact feature in an Image Editor is a valuable tool that empowers users to conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information. +The redact feature conceals sensitive content by applying blur or pixel effects to selected regions of an image. It supports privacy protection and regulatory compliance, enabling secure image sharing without exposing confidential information. ## Apply redact to the image -The Image Editor control includes a [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method, which allows you to draw redaction on an image. This method takes six parameters that define how the redact should be carried out: +The Image Editor control provides the [DrawRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_Syncfusion_Blazor_ImageEditor_RedactType_System_Double_System_Double_System_Double_System_Double_System_Int32_) method to draw a redaction on an image. This method accepts six parameters that define how the redaction is applied: -* redactType: Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value. +* redactType: Defines the redaction type to draw on the image, such as blur or pixelate. If not specified, redaction uses the default blur type. -* startX: Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter. +* startX: Defines the x-coordinate of the redaction. If not specified, redaction starts from the image center. -* startY: Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image. +* startY: Defines the y-coordinate of the redaction. If not specified, redaction starts from the image center. -* width: Specifies the width of redaction. The default value is 100. +* width: Defines the redaction width. The default value is 100. -* height: Specifies the height of redaction. The default value is 50. +* height: Defines the redaction height. The default value is 50. -* value: Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur. +* value: Defines the blur intensity for blur-type redaction or the pixel size for pixelate-type redaction. The default is 20 because the default redaction type is blur. ## Selecting a redact -The Image Editor control includes a [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method, which allows you to select a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [SelectRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_) method to select a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to perform selection. This method accepts one parameter: -* id: Specifies the redact id to select a redact on an image. +* id: Defines the redaction identifier to select a redaction on an image. ## Deleting a redact -The Image Editor control includes a [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method, which allows you to delete a redaction based on the given redaction id. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out: +The Image Editor control provides the [DeleteRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_) method to delete a redaction by its identifier. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redaction identifier and pass it to delete the corresponding redaction. This method accepts one parameter: -* id: Specifies the redact id to delete a redact on an image. +* id: Defines the redaction identifier to delete a redaction on an image. ## Updating a redact -The Image Editor control includes a [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method, which allows you to update the existing redacts by changing its height, width, blur, and pixel size in the component. Use [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to get the redacts which is then passed to change the options of a redacts. This method takes two parameters that define how the redact should be carried out: +The Image Editor control provides the [UpdateRedactAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) method to update existing redactions by modifying height, width, blur intensity, or pixel size. Use the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to obtain the redactions and pass them to update the desired options. This method accepts two parameters: -* setting: Specifies the redact settings to be updated for the shape on an image. +* setting: Defines the redact settings to update for the redaction on an image. -* isSelected: Specifies to show the redacts in the selected state. +* isSelected: Defines whether to show the redactions in the selected state. ## Getting redacts -The Image Editor control includes a [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method, which allows you to get all the redact details which is drawn on an image editor. +The Image Editor control provides the [GetRedactsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) method to retrieve all redaction details drawn in the Image Editor. -Here's an example demonstrating how to draw, select, delete, update, and get redacts on an image using the [`DrawRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRedactAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__), [`SelectRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SelectRedactAsync_System_String_), [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_String_), [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_Syncfusion_Blazor_ImageEditor_RedactSettings_System_Boolean_) and [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync) methods. +The following example demonstrates how to draw, select, delete, update, and get redactions using the `DrawRedactAsync`, `SelectRedactAsync`, `DeleteRedactAsync`, `UpdateRedactAsync` and `GetRedactsAsync` methods. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -77,7 +77,7 @@ Here's an example demonstrating how to draw, select, delete, update, and get red private async void addRedact() { ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync(); - await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 100, Dimension.Y.Value + 100, 200, 300); + await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 10, Dimension.Y.Value + 10, 200, 300); } private async void updateRedact() { @@ -104,4 +104,4 @@ Here's an example demonstrating how to draw, select, delete, update, and get red } ``` -![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.png) \ No newline at end of file +![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.jpg) \ No newline at end of file