Merge pull request #4850 from syncfusion-content/EJ2-908998-feature-ug

908998: Image Editor New feature UG sample for Blazor platform

Author: Satheeskumar-1989

blazor-toc.html

@@ -3082,6 +3082,7 @@
 			<li> <a href="/blazor/image-editor/frame">Frame</a></li>
 			<li> <a href="/blazor/image-editor/resize">Resize</a></li>
 			<li> <a href="/blazor/image-editor/z-order">Z-Order</a></li>
+			<li> <a href="/blazor/image-editor/redact">Redact</a></li>
 			<li> <a href="/blazor/image-editor/localization">Localization</a></li>
 			<li> <a href="/blazor/image-editor/accessibility">Accessibility</a></li>
 			<li>

blazor/image-editor/annotation.md

@@ -15,7 +15,7 @@ The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-im
 
 Text annotation feature in the Blazor Image Editor component provides the capability to add and customize labels, captions, and other text elements directly onto the image. With this feature, you can easily insert text at specific locations within the image and customize various aspects of the text to meet your requirements.
 
-You have control over the customization options including text content, font family, font style and font size for the text annotation.
+You have control over the customization options including text content, font family, font style, font color, fill color, stroke color, stroke width and font size for the text annotation.
 
 ### Add a text
 
@@ -39,6 +39,14 @@ The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Im
 
 * isSelected: Specifies to show the text in the selected state.
 
+* degree: Specifies the degree to rotate the text.
+
+* fillColor: Specifies the background color of the text.
+
+* strokeColor: Specifies the outline color of the text annotation.
+
+* strokeWidth: Specifies the outline stroke width of the text annotation.
+
 By utilizing the [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_String_System_String_System_Nullable_System_Int32__System_Boolean_System_Boolean_System_String_) method with these parameters, you can precisely position and customize text annotations within the image. This provides the flexibility to add labels, captions, or other text elements with specific font styles, sizes, and colors, enhancing the visual presentation and clarity of the image. 
 
 Here is an example of adding a text in a button click using [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_String_System_String_System_Nullable_System_Int32__System_Boolean_System_Boolean_System_String_) method. 
@@ -51,6 +59,8 @@ In the following example, you can using the DrawTextAsync method in the button c
 
 <div style="padding-bottom: 15px">
     <SfButton OnClick="DrawTextAsync">Draw Text</SfButton>
+    <SfButton OnClick="DrawTextOutlineAsync">Draw Text Outline</SfButton>
+    <SfButton OnClick="DrawTextBackgroundColorAsync">Draw Text Background Color</SfButton>
 </div>
 <SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
     <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
@@ -70,6 +80,16 @@ In the following example, you can using the DrawTextAsync method in the button c
         ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
         await ImageEditor.DrawTextAsync(Dimension.X.Value + 100, Dimension.Y.Value + 100, "Syncfusion");
     }
+    private async void DrawTextOutlineAsync()
+    {
+        ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+        await ImageEditor.DrawTextAsync(Dimension.X.Value + 100, Dimension.Y.Value + 100, 'Syncfusion', 'Arial', 70, false, false, '', false, null, '', 'green', 8);
+    }
+    private async void DrawTextBackgroundColorAsync()
+    {
+        ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+        await ImageEditor.DrawTextAsync(Dimension.X.Value + 100, Dimension.Y.Value + 100, 'Syncfusion', 'Arial', 70, false, false, '', false, null, 'red', '', null);
+    }
 }
 ```
 
@@ -377,7 +397,7 @@ The Blazor Image Editor component provides the ability to add shape annotations
 
 The [`DrawRectangleAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Int32__System_String_System_String_) method is used to draw rectangle in the Blazor Image Editor component. Rectangle annotations are valuable tools for highlighting, emphasizing, or marking specific areas of an image to draw attention or provide additional context.
 
-The [`DrawRectangleAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Int32__System_String_System_String_) method in the Image Editor component takes seven parameters to define the properties of the rectangle annotation: 
+The [`DrawRectangleAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawRectangleAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Int32__System_String_System_String_) method in the Image Editor component takes ten parameters to define the properties of the rectangle annotation: 
 
 * x: Specifies the x-coordinate of the top-left corner of the rectangle. 
 
@@ -397,6 +417,8 @@ The [`DrawRectangleAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 * isSelected: Specifies to show the rectangle in the selected state.
 
+* borderRadius: Specifies the radius to apply border radius to rectangle.
+
 The [`DrawEllipseAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_String_System_String_) method in the Blazor Image Editor component is used to draw an ellipse. Ellipse annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.
 
 The [`DrawEllipseAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawEllipseAsync_System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_Nullable_System_Double__System_String_System_String_) method in the Image Editor component takes seven parameters to define the properties of the ellipse annotation: 
@@ -501,7 +523,7 @@ Here is an example of inserting rectangle, ellipse, arrow, path, and line in a b
 
     private async void RectangleAsync()
     {
-        await ImageEditor.DrawRectangleAsync(250, 50, 120, 120, 4, "#fff", "blue");
+        await ImageEditor.DrawRectangleAsync(250, 50, 120, 120, 4, "#fff", "blue", null, null, 8);
     }
 
     private async void EllipseAsync()

blazor/image-editor/images/blazor-image-editor-redact.png

@@ -0,0 +1,107 @@
+---
+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.
+platform: Blazor
+control: Image Editor
+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.
+
+## 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_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) method, which allows you to draw redaction on an image. This method takes six parameters that define how the redact should be carried out:
+
+* 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.
+
+* startX: Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter.
+
+* startY: Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image.
+
+* width: Specifies the width of redaction. The default value is 100.
+
+* height: Specifies the height of redaction. 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.
+
+## 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_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) 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 _System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) 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:
+
+* id: Specifies the redact id to select a redact 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_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) 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 _System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) 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:
+
+* id: Specifies the redact id to delete a redact 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_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_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 _System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) 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:
+
+* setting: Specifies the redact settings to be updated for the shape on an image.
+
+* isSelected: Specifies to show the redacts 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 _System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) method, which allows you to get all the redact details which is drawn on an 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_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__), [`DeleteRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DeleteRedactAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__), [`UpdateRedactAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_UpdateRedactAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) and [`GetRedactsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_GetRedactsAsync _System_Nullable_System_Int32__System_Nullable_System_Int32__System_Nullable_System_Boolean__) methods.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor
+@using Syncfusion.Blazor.Buttons
+
+<div style="padding-bottom: 15px">
+    <SfButton OnClick="addRedact">Add Redact</SfButton>
+    <SfButton OnClick="updateRedact">Update Redact</SfButton>
+    <SfButton OnClick="selectRedact">Select Redact</SfButton>
+    <SfButton OnClick="deleteRedact">Delete Redact</SfButton>
+</div>
+
+<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
+<ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
+</SfImageEditor>
+@code {
+    private SfImageEditor ImageEditor;
+    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
+    private async void OpenAsync()
+    {
+        await ImageEditor.OpenAsync("nature.png");
+    }
+    private async void addRedact()
+    {
+        ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+        await ImageEditor.DrawRedactAsync(RedactType.Blur, Dimension.X.Value + 100, Dimension.Y.Value + 100, 200, 300);
+    }
+    private async void updateRedact()
+    {
+        RedactSettings[] redacts = await ImageEditor.GetRedactsAsync();
+        if (redacts.Length > 0) {
+            redacts[redacts.Length - 1].BlurIntensity = 100;
+           await  ImageEditor.UpdateRedactAsync(redacts[redacts.Length - 1]);
+        }
+    }
+    private async void selectRedact()
+    {
+        RedactSettings[] redacts = await ImageEditor.GetRedactsAsync();
+        if (redacts.Length > 0) {
+            await ImageEditor.SelectRedactAsync(redacts[redacts.Length - 1].ID);
+        }
+    }
+    private async void deleteRedact()
+    {
+        RedactSettings[] redacts = await ImageEditor.GetRedactsAsync();
+        if (redacts.Length > 0) {
+            await ImageEditor.DeleteRedactAsync(redacts[redacts.Length - 1].ID);
+        }
+    }
+}
+```
+
+![Blazor Image Editor with Redaction](./images/blazor-image-editor-redact.png)