diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/default.cs b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/default.cs new file mode 100644 index 0000000000..aa9ed51b46 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/default.cs @@ -0,0 +1,4 @@ +public ActionResult Default() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/razor b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/razor new file mode 100644 index 0000000000..fe525ad73b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/razor @@ -0,0 +1,81 @@ +
+ @Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Width("550px").Height("350px").ShowQuickAccessToolbar(false).Render() +
+ @Html.EJS().Button("addText").CssClass("e-primary").Content("Add Text").Click("addTextHandler").Render() +
+ + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/tagHelper b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/tagHelper new file mode 100644 index 0000000000..cc04e66a9b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/tagHelper @@ -0,0 +1,86 @@ +@{ + var imageTool = new string[] { }; +} + +
+ +
+ +
+ + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/default.cs b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/default.cs new file mode 100644 index 0000000000..aa9ed51b46 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/default.cs @@ -0,0 +1,4 @@ +public ActionResult Default() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/razor b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/razor new file mode 100644 index 0000000000..f822a31b96 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/razor @@ -0,0 +1,49 @@ +
+ @Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Width("550px").Height("350px").Render() +
+ @Html.EJS().Button("contain").CssClass("e-primary").Content("Fit to Width (Aspect Ratio)").Click("contain").Render() + @Html.EJS().Button("cover").CssClass("e-primary").Content("Cover (Aspect Ratio)").Click("cover").Render() + @Html.EJS().Button("stretch").CssClass("e-primary").Content("Stretch / Shrink").Click("stretch").Render() +
+
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/tagHelper b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/tagHelper new file mode 100644 index 0000000000..84e39bdd83 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/tagHelper @@ -0,0 +1,56 @@ +@{ + var toolbar = new string[] { }; +} + +
+ +
+ + + +
+
+ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/image-editor/annotation.md b/ej2-asp-core-mvc/image-editor/annotation.md index d908b12f18..2bad2e4ba7 100644 --- a/ej2-asp-core-mvc/image-editor/annotation.md +++ b/ej2-asp-core-mvc/image-editor/annotation.md @@ -50,6 +50,10 @@ The `drawText` method in the Image Editor allows you to insert a text annotation * 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 DrawText 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 `drawText` method. @@ -221,6 +225,37 @@ Output be like the below. ![ImageEditor Sample](images/image-editor-add-font-family.jpg) +### Formatting Text with Bold, Italic, Underline, and Strikethrough + +The `drawText` method in the 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. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/image-editor/annotation/text-CS1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/annotation/text-CS1/default.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/image-editor/annotation/text-CS1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/annotation/text-CS1/default.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![ImageEditor Sample](images/image-editor-text-format.jpg) + ## Freehand drawing The Freehand Draw annotation tool in the Image Editor control 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/ej2-asp-core-mvc/image-editor/end-user-capabilities.md b/ej2-asp-core-mvc/image-editor/end-user-capabilities.md index 6678c49ec7..9f9faf792e 100644 --- a/ej2-asp-core-mvc/image-editor/end-user-capabilities.md +++ b/ej2-asp-core-mvc/image-editor/end-user-capabilities.md @@ -18,7 +18,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/ej2-asp-core-mvc/image-editor/image-restrictions.md b/ej2-asp-core-mvc/image-editor/image-restrictions.md index 9995770c3b..9f802f06fc 100644 --- a/ej2-asp-core-mvc/image-editor/image-restrictions.md +++ b/ej2-asp-core-mvc/image-editor/image-restrictions.md @@ -13,11 +13,11 @@ domainurl: ##DomainURL## 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 [`UploadSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.ImageEditor.ImageEditor.html#Syncfusion_EJ2_ImageEditor_ImageEditor_UploadSettings) 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 `UploadSettings.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 `UploadSettings.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/ej2-asp-core-mvc/image-editor/images/image-editor-text-format.jpg b/ej2-asp-core-mvc/image-editor/images/image-editor-text-format.jpg new file mode 100644 index 0000000000..d223aec066 Binary files /dev/null and b/ej2-asp-core-mvc/image-editor/images/image-editor-text-format.jpg differ diff --git a/ej2-asp-core-mvc/image-editor/images/image-editor-width-height.jpg b/ej2-asp-core-mvc/image-editor/images/image-editor-width-height.jpg new file mode 100644 index 0000000000..07e6a01dc4 Binary files /dev/null and b/ej2-asp-core-mvc/image-editor/images/image-editor-width-height.jpg differ diff --git a/ej2-asp-core-mvc/image-editor/open-save.md b/ej2-asp-core-mvc/image-editor/open-save.md index 21f1ed0d53..207add11d6 100644 --- a/ej2-asp-core-mvc/image-editor/open-save.md +++ b/ej2-asp-core-mvc/image-editor/open-save.md @@ -16,7 +16,7 @@ To save an edited image in the Image Editor control, use the toBlob method to co ## 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. @@ -258,6 +258,44 @@ Output be like the below. ![ImageEditor Sample](images/image-editor-watermark.jpeg) +### Opening Images with Custom Width and Height + +Users can now open images with specific width and height values using the `imageSettings` parameter in the `open` method. This enhancement introduces three additional properties: `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 open method. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/image-editor/open-save/open-image-cs7/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/open-save/open-image-cs7/default.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/image-editor/open-save/open-image-cs7/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Default.cs" %} +{% include code-snippet/image-editor/open-save/open-image-cs7/default.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![ImageEditor Sample](images/image-editor-width-height.jpg) + ## Save as image The `export` method in the Image Editor control enables you to save the modified image as a file on the local device. This method accepts two parameters: the file name and the file type. @@ -268,7 +306,6 @@ By utilizing the `export` method with the appropriate file name and file type, y In the following example, the `export` method is used in the button click event. - {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -438,7 +475,7 @@ The [`FileOpened`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.I * 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: 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: 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 control.