diff --git a/blazor/image-editor/annotation.md b/blazor/image-editor/annotation.md index b67e9e6814..0a454f758c 100644 --- a/blazor/image-editor/annotation.md +++ b/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,176 @@ 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 + + + + +
+ Add Text + + + + + Bold + + + + + + Italic + + + + + + Underline + + + + + + Strikethrough + + + +
+ + +@code { + SfImageEditor ImageEditor; + Boolean IsTextInsterted = false; + private List customToolbarItem = new List() { }; + + 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. diff --git a/blazor/image-editor/end-user-capabilities.md b/blazor/image-editor/end-user-capabilities.md index 82952b28fa..357277c481 100644 --- a/blazor/image-editor/end-user-capabilities.md +++ b/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. diff --git a/blazor/image-editor/image-restrictions.md b/blazor/image-editor/image-restrictions.md index 8cd476534d..37adfee207 100644 --- a/blazor/image-editor/image-restrictions.md +++ b/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. diff --git a/blazor/image-editor/images/blazor-image-editor-custom-height-width.png b/blazor/image-editor/images/blazor-image-editor-custom-height-width.png new file mode 100644 index 0000000000..a16d904200 Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-custom-height-width.png differ diff --git a/blazor/image-editor/images/blazor-image-editor-formatting-text.png b/blazor/image-editor/images/blazor-image-editor-formatting-text.png new file mode 100644 index 0000000000..4b00ea3beb Binary files /dev/null and b/blazor/image-editor/images/blazor-image-editor-formatting-text.png differ diff --git a/blazor/image-editor/open-save.md b/blazor/image-editor/open-save.md index 6e75fa0c02..25350d13fb 100644 --- a/blazor/image-editor/open-save.md +++ b/blazor/image-editor/open-save.md @@ -14,9 +14,9 @@ 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 three 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. +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, WEBP and BMP based on your specific requirements or preferences. ## Open an image @@ -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 + + + + +
+ Fit to Width (Aspect Ratio) + Cover (Aspect Ratio) + Stretch / Shrink +
+@code { + SfImageEditor ImageEditor; + private List customToolbarItem = new List() { }; + + 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.