961191: Prepare UG for IE 2025 Vol2 completed features

blazor/image-editor/annotation.md

@@ -49,6 +49,10 @@ The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Im
 
 * transformCollection: Specifies the transform collection of the text annotation.
 
+* underline — Specifies whether the text should be underlined.
+
+* strikethrough — Specifies whether the text should have a strikethrough.
+
 By utilizing the `DrawTextAsync` 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` method. 
@@ -251,7 +255,159 @@ Here is an example of adding additional font family using the `ImageEditorFontFa
 ```
 
 ![Blazor Image Editor with Custom font family in an image](./images/blazor-image-editor-font.png)
-
+
+### Formatting Text with Bold, Italic, Underline, and Strikethrough
+
+The [`DrawTextAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DrawTextAsync_System_Double_System_Double_System_String_System_String_System_Int32_System_Boolean_System_Boolean_System_String_System_Boolean_System_Int32_System_String_System_String_System_Int32_) method in the Blazor Image Editor component allows you to insert a text annotation into the image with specific customization options. Applying these styles enhances the text by improving readability and emphasizing key information, where bold increases visual weight to highlight important points, italic adds a slanted emphasis or creative touch, underline draws a line beneath the text for clarity or separation, and strikethrough places a line through text to indicate removal or outdated content. These formatting options enable users to make their annotations more visually distinctive and effective in conveying information
+
+
+Here is an example of adding a text in a button click using `DrawTextAsync` method. 
+
+In the following example, you can using the DrawTextAsync method in the button click event.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.SplitButtons
+
+<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="330" Width="550" ShowQuickAccessToolbar="false">
+    <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
+</SfImageEditor>
+<div class="button-toolbar">
+    <SfButton CssClass="@(IsTextInsterted ? "e-disabled" : "e-primary")" Disabled="@IsTextInsterted" OnClick="AddTextAsync">Add Text</SfButton>
+    <SfButtonGroup Mode="SelectionMode.Multiple">
+        <ButtonGroupButton onclick="@BoldAsync" IconCss="e-icons e-bold">
+            Bold
+        </ButtonGroupButton>
+        <ButtonGroupButton onclick="@ItalicAsync" IconCss="e-icons e-italic">
+            Italic
+        </ButtonGroupButton>
+        <ButtonGroupButton onclick="@UnderlineAsync" IconCss="e-icons e-underline">
+            Underline
+        </ButtonGroupButton>
+        <ButtonGroupButton onclick="@StrikethroughAsync" IconCss="e-icons e-strikethrough">
+            Strikethrough
+        </ButtonGroupButton>
+    </SfButtonGroup>
+</div>
+<style>
+    .button-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: nowrap;
+        margin-top: 10px;
+    }
+</style>
+
+@code {
+    SfImageEditor ImageEditor;
+    Boolean IsTextInsterted = false;
+    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
+
+    private async void OpenAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
+    }
+
+    private async void AddTextAsync()
+    {
+        if (!IsTextInsterted)
+        {
+            IsTextInsterted = true;
+            ImageDimension Dimension = await ImageEditor.GetImageDimensionAsync();
+            await ImageEditor.DrawTextAsync(Dimension.X.Value, Dimension.Y.Value, "Syncfusion");
+        }
+    }
+    private async void BoldAsync()
+    {
+        ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
+        if (shapes != null && shapes.Length > 0)
+        {
+            var shape = shapes[0];
+            var fontStyles = shape.FontStyle?.ToList();
+
+            if (fontStyles.Contains("bold"))
+            {
+                fontStyles.Remove("bold");
+            }
+            else
+            {
+                fontStyles.Add("bold");
+            }
+
+            shape.FontStyle = fontStyles.ToArray();
+            await ImageEditor.UpdateShapeAsync(shapes[0]);
+        }
+    }
+    private async void ItalicAsync()
+    {
+        ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
+        if (shapes != null && shapes.Length > 0)
+        {
+            var shape = shapes[0];
+            var fontStyles = shape.FontStyle?.ToList();
+
+            if (fontStyles.Contains("italic"))
+            {
+                fontStyles.Remove("italic");
+            }
+            else
+            {
+                fontStyles.Add("italic");
+            }
+
+            shape.FontStyle = fontStyles.ToArray();
+            await ImageEditor.UpdateShapeAsync(shapes[0]);
+        }
+    }
+    private async void UnderlineAsync()
+    {
+        ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
+        if (shapes != null && shapes.Length > 0)
+        {
+            var shape = shapes[0];
+            var fontStyles = shape.FontStyle?.ToList();
+
+            if (fontStyles.Contains("underline"))
+            {
+                fontStyles.Remove("underline");
+            }
+            else
+            {
+                fontStyles.Add("underline");
+            }
+
+            shape.FontStyle = fontStyles.ToArray();
+            await ImageEditor.UpdateShapeAsync(shapes[0]);
+        }
+    }
+    private async void StrikethroughAsync()
+    {
+        ShapeSettings[] shapes = await ImageEditor.GetShapesAsync();
+        if (shapes != null && shapes.Length > 0)
+        {
+            var shape = shapes[0];
+            var fontStyles = shape.FontStyle?.ToList();
+
+            if (fontStyles.Contains("strikethrough"))
+            {
+                fontStyles.Remove("strikethrough");
+            }
+            else
+            {
+                fontStyles.Add("strikethrough");
+            }
+
+            shape.FontStyle = fontStyles.ToArray();
+            await ImageEditor.UpdateShapeAsync(shapes[0]);
+        }
+    }
+}
+```
+
+![Blazor Image Editor with Draw text an image](./images/blazor-image-editor-formatting-text.png)
+
 ## Freehand drawing
 
 The Freehand Draw annotation tool in the Blazor Image Editor component is a versatile feature that allows users to draw and sketch directly on the image using mouse or touch input. This tool provides a flexible and creative way to add freehand drawings or annotations to the image. 

blazor/image-editor/end-user-capabilities.md

@@ -17,7 +17,7 @@ To open an image in the image editor, do the following steps.
 
 * Click the Open icon from the left side of the toolbar.
 
-* The file explorer lists only JPEG, PNG, JPG, and WEBP format files.
+* The file explorer lists only JPEG, PNG, JPG, WEBP and BMP format files.
 
 * Select the image from the list of the images from the file explorer window.
 

blazor/image-editor/image-restrictions.md

@@ -11,11 +11,11 @@ documentation: ug
 
 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.
 
-`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, and .webp extensions, without any file size restrictions.
+`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.
 
 ## 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`, and `.webp` and `.svg` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .webp, and .svg 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.
 
 `Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string.
 

blazor/image-editor/open-save.md

@@ -14,7 +14,7 @@ The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-im
 
 ## Supported image formats
 
-The Image Editor control supports three common image formats: PNG, JPEG, SVG, and WEBP. These formats allow you to work with a wide range of image files within the Image Editor.
+The Image Editor control supports five common image formats: PNG, JPEG, SVG, WEBP and BMP. These formats allow you to work with a wide range of image files within the Image Editor.
 
 When it comes to saving the edited image, the default file type is set as PNG. This means that when you save the edited image without specifying a different file type, it will be saved as a PNG file. However, it's important to note that the Image Editor typically provides options or methods to specify a different file type if desired. This allows you to save the edited image in formats other than the default PNG, such as JPEG, SVG, and WEBP based on your specific requirements or preferences.
 
@@ -418,6 +418,55 @@ You can utilize the [`FileOpenEventArgs`](https://help.syncfusion.com/cr/blazor/
 ```
 ![Blazor Image Editor with Adding Watermark](./images/blazor-image-editor-add-watermark.jpeg)
 
+### Opening Images with Custom Width and Height
+
+Users can now open images with specific width and height values using the optional parameters in the [`OpenAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_OpenAsync_System_Object_System_Boolean_System_String_) method. This enhancement introduces three optional parameters: `width`, `height`, and `isAspectRatio`These options allow precise control over the image dimensions, with the flexibility to preserve the original aspect ratio if needed. This feature is especially useful when rendering high-resolution images or when fitting images into fixed-size layouts or canvas areas.
+
+The following behaviors are supported through these properties:
+	- Contains behavior: By specifying only one dimension (either `width` or `height`) and enabling `isAspectRatio`, the other dimension is automatically calculated to maintain the image’s original proportions.
+    - Cover behavior: When both `width` and `height` are specified with `isAspectRatio` set to `true`, the image scales proportionally to fit within the given dimensions while preserving its aspect ratio.
+    - Stretch or Shrink behavior: Setting `isAspectRatio` to `false` forces the image to strictly follow the specified `width` and `height`, allowing it to stretch or shrink regardless of its original aspect ratio.
+
+The following example showcases how all three behaviors can be achieved using the OpenAsync method.
+
+```cshtml
+@using Syncfusion.Blazor.ImageEditor 
+@using Syncfusion.Blazor.Buttons
+
+<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="330" Width="550">
+    <ImageEditorEvents Created="OpenAsync"></ImageEditorEvents>
+</SfImageEditor>
+<div style="display: flex; gap: 12px; margin-top: 10px">
+    <SfButton CssClass="e-primary" OnClick="ContainsAsync">Fit to Width (Aspect Ratio)</SfButton>
+    <SfButton CssClass="e-primary" OnClick="CoverAsync">Cover (Aspect Ratio)</SfButton>
+    <SfButton CssClass="e-primary" OnClick="StretchAsync">Stretch / Shrink</SfButton>
+</div>
+@code {
+    SfImageEditor ImageEditor;
+    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>() { };
+
+    private async void OpenAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
+    }
+
+    private async void ContainsAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 550, -1, true);
+    }
+    private async void CoverAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 550, 550, true);
+    }
+    private async void StretchAsync()
+    {
+        await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png", true, "", 330, 330, false);
+    }
+}
+```
+
+![Blazor Image Editor with Opening an image](./images/blazor-image-editor-custom-height-width.png)
+
 ## Save as image
 
 The [`ExportAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_System_Double_) method in the Blazor Image Editor component is used to save the modified image as an image, and it accepts a file name and file type as parameters. The file type parameter supports PNG, JPEG, SVG, and WEBP the default file type is PNG. Users are allowed to save an image with a specified file name, file type, and image quality. This enhancement provides more control over the output, ensuring that users can save their work exactly as they need it.
@@ -678,7 +727,7 @@ The [`FileOpened`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Image
 
 [`FileName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileName): This argument is a string that contains the file name of the opened image. It represents the name of the file that was selected or provided when loading the image into the Image Editor.
 
-[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType): This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, SVG, and WEBP. 
+[`FileType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.FileOpenEventArgs.html#Syncfusion_Blazor_ImageEditor_FileOpenEventArgs_FileType): This argument is a string that contains the type of the opened image. It specifies the format or file type of the image that was loaded, such as PNG, JPEG, SVG, WEBP and BMP. 
 
 By accessing these arguments within the `FileOpened` event handler, you can retrieve information about the loaded image, such as its file name and file type. This can be useful for performing additional actions or implementing logic based on the specific image that was opened in the Image Editor component.