961196: Prepare UG for IE 2025 Vol2 completed features

ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/default.cs

@@ -0,0 +1,4 @@
+public ActionResult Default()
+{
+    return View();
+}

ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/razor

@@ -0,0 +1,81 @@
+<div class="col-lg-12 control-section e-img-editor-sample">
+    @Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Width("550px").Height("350px").ShowQuickAccessToolbar(false).Render()
+    <div class="button-group" style="margin-top: 10px;">
+        @Html.EJS().Button("addText").CssClass("e-primary").Content("Add Text").Click("addTextHandler").Render()
+        <div class="e-btn-group">
+            <input type="checkbox" id="checkbold" onchange="toggleFontStyle('bold', this.checked)" />
+            <label class="e-btn" for="checkbold"><span class="e-icons e-bold"></span>Bold</label>
+            <input type="checkbox" id="checkitalic" onchange="toggleFontStyle('italic', this.checked)" />
+            <label class="e-btn" for="checkitalic"><span class="e-icons e-italic"></span>Italic</label>
+            <input type="checkbox" id="checkline" onchange="toggleFontStyle('underline', this.checked)" />
+            <label class="e-btn" for="checkline"><span class="e-icons e-underline"></span>Underline</label>
+            <input type="checkbox" id="checkstrikethrough" onchange="toggleFontStyle('strikethrough', this.checked)" />
+            <label class="e-btn" for="checkstrikethrough"><span class="e-icons e-strikethrough"></span>Strikethrough</label>
+        </div>
+    </div>
+</div>
+
+<script>
+    function created() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
+    }
+
+    function addTextHandler() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        var dimension = imageEditorObj.getImageDimension();
+        imageEditorObj.drawText(dimension.x, dimension.y, 'Syncfusion');
+        var addButton = document.getElementById('addText');
+        addButton.ej2_instances[0].disabled = true;
+    }
+
+    function toggleFontStyle(style, isChecked) {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        let shapes = imageEditorObj.getShapeSettings();
+        if (shapes[0]) {
+            if (isChecked) {
+                if (!shapes[0].fontStyle.includes(style)) {
+                    shapes[0].fontStyle.push(style);
+                }
+            } else {
+                shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== style);
+            }
+            imageEditorObj.updateShape(shapes[0]);
+        }
+    }
+</script>
+
+<style>
+    .image-editor {
+        margin: 0 auto;
+    }
+
+    .e-img-editor-sample {
+        height: 80vh;
+        width: 100%;
+    }
+
+    @@media only screen and (max-width: 700px) {
+        .e-img-editor-sample {
+            height: 75vh;
+            width: 100%;
+        }
+    }
+
+    .control-wrapper {
+        height: 100%;
+    }
+
+    .button-group {
+        display: flex;
+        align-items: center;
+    }
+
+    #addText {
+        margin-right: 10px;
+    }
+
+    .button-group .e-btn .e-icons {
+        margin-right: 5px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/image-editor/annotation/text-CS1/tagHelper

@@ -0,0 +1,86 @@
+@{
+    var imageTool = new string[] { };
+}
+
+<div class="col-lg-12 control-section e-img-editor-sample">
+    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool" width="550px" height="350px" ShowQuickAccessToolbar="false"></ejs-imageeditor>
+    <div class="button-group" style="margin-top: 10px;">
+        <ejs-button id="addText" cssClass="e-primary" content="Draw Text" onclick="addTextHandler()"></ejs-button>
+        <div class="e-btn-group">
+            <input type="checkbox" id="checkbold" onchange="toggleFontStyle('bold', this.checked)" />
+            <label class="e-btn" for="checkbold"><span class="e-icons e-bold"></span>Bold</label>
+            <input type="checkbox" id="checkitalic" onchange="toggleFontStyle('italic', this.checked)" />
+            <label class="e-btn" for="checkitalic"><span class="e-icons e-italic"></span>Italic</label>
+            <input type="checkbox" id="checkline" onchange="toggleFontStyle('underline', this.checked)" />
+            <label class="e-btn" for="checkline"><span class="e-icons e-underline"></span>Underline</label>
+            <input type="checkbox" id="checkstrikethrough" onchange="toggleFontStyle('strikethrough', this.checked)" />
+            <label class="e-btn" for="checkstrikethrough"><span class="e-icons e-strikethrough"></span>Strikethrough</label>
+        </div>
+    </div>
+</div>
+
+<script>
+    function created() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
+    }
+
+    function addTextHandler() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        var dimension = imageEditorObj.getImageDimension();
+        imageEditorObj.drawText(dimension.x, dimension.y, 'Syncfusion');
+        var addButton = document.getElementById('addText');
+        addButton.disabled = true;
+    }
+
+    function toggleFontStyle(style, isChecked) {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        let shapes = imageEditorObj.getShapeSettings();
+        if (shapes[0]) {
+            if (isChecked) {
+                if (!shapes[0].fontStyle.includes(style)) {
+                    shapes[0].fontStyle.push(style);
+                }
+            } else {
+                shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== style);
+            }
+            imageEditorObj.updateShape(shapes[0]);
+        }
+    }
+</script>
+
+<style>
+    .image-editor {
+        margin: 0 auto;
+    }
+
+    .e-img-editor-sample {
+        height: 80vh;
+        width: 100%;
+    }
+
+    @@media only screen and (max-width: 700px) {
+        .e-img-editor-sample {
+            height: 75vh;
+            width: 100%;
+        }
+    }
+
+    .control-wrapper {
+        height: 100%;
+    }
+
+    .button-group .e-btn {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    #addText {
+        margin-right: 10px;
+        margin-bottom: 5px;
+    }
+
+    .button-group .e-btn .e-icons {
+        margin-right: 5px;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS2/tagHelper

@@ -1,37 +1,13 @@
 
 <div class="col-lg-12 control-section e-img-editor-sample">
-    <ejs-imageeditor id="image-editor" created="created" ></ejs-imageeditor>
+    <ejs-imageeditor id="image-editor"></ejs-imageeditor>
 </div>
-<ejs-button id="saveBlob" onclick="saveBlob()" cssClass="e-primary" content="SAVE BLOB"></ejs-button>
-<ejs-button id="openBlob" onclick="openBlob()" cssClass="e-primary" content="OPEN BLOB"></ejs-button>
+<ejs-button id="openImage" onclick="openImage()" cssClass="e-primary" content="Open Image"></ejs-button>
 
 <script>
-   var blobUrl;
-    function created() {
+    function openImage() {
         var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
-        if (ej.base.Browser.isDevice) {
-            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
-        } else {
-            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
-        }
-    }
-
-
-    function saveBlob() {
-        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
-        var imageData = imgObj.getImageData();
-        var canvas = document.createElement('canvas');
-        var ctx = canvas.getContext('2d');
-        canvas.width = imageData.width;
-        canvas.height = imageData.height;
-        ctx.putImageData(imageData, 0, 0);
-        canvas.toBlob((blob) =>{
-          this.blobUrl = URL.createObjectURL(blob);// For getting blob.
-        });
-    }
-    function openBlob() {
-        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
-        imgObj.open(this.blobUrl);
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: null, height: 575 });
     }
 </script>
 

ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/default.cs

@@ -0,0 +1,4 @@
+public ActionResult Default()
+{
+    return View();
+}

ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/razor

@@ -0,0 +1,49 @@
+<div class="col-lg-12 control-section e-img-editor-sample">
+    @Html.EJS().ImageEditor("image-editor").Created("created").Toolbar(new string[] { }).Width("550px").Height("350px").Render()
+    <div class="button-group" style="margin-top: 10px;">
+        @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()
+    </div>
+</div>
+
+<script>
+    function created() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
+    }
+
+    function contain() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 550, height: null, isAspectRatio: true });
+    }
+
+    function cover() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 550, height: 550, isAspectRatio: true });
+    }
+
+    function stretch() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 350, height: 350, isAspectRatio: false });
+    }
+</script>
+
+<style>
+.image-editor {
+    margin: 0 auto;
+}
+.e-img-editor-sample {
+    height: 80vh;
+    width: 100%;
+}
+@@media only screen and (max-width: 700px) {
+    .e-img-editor-sample {
+        height: 75vh;
+        width: 100%;
+    }
+}
+.control-wrapper {
+    height: 100%;
+}
+</style>

ej2-asp-core-mvc/code-snippet/image-editor/open-save/open-image-CS7/tagHelper

@@ -0,0 +1,56 @@
+@{
+    var toolbar = new string[] { };
+}
+
+<div class="col-lg-12 control-section e-img-editor-sample">
+    <ejs-imageeditor id="image-editor" width="550px" height="350px" created="created" toolbar="@toolbar"></ejs-imageeditor>
+    <div class="button-group" style="margin-top: 10px;">
+        <ejs-button id="contain" cssClass="e-primary" content="Fit to Width (Aspect Ratio)" onclick="contain()"></ejs-button>
+        <ejs-button id="cover" cssClass="e-primary" content="Cover (Aspect Ratio)" onclick="cover()"></ejs-button>
+        <ejs-button id="stretch" cssClass="e-primary" content="Stretch / Shrink" onclick="stretch()"></ejs-button>
+    </div>
+</div>
+
+<script>
+    function created() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
+    }
+
+    function contain() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 550, height: null, isAspectRatio: true });
+    }
+
+    function cover() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 550, height: 550, isAspectRatio: true });
+    }
+
+    function stretch() {
+        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
+        imageEditorObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png', true, { backgroundColor: '', width: 350, height: 350, isAspectRatio: false });
+    }
+</script>
+
+<style>
+    .image-editor {
+        margin: 0 auto;
+    }
+
+    .e-img-editor-sample {
+        height: 80vh;
+        width: 100%;
+    }
+
+    @@media only screen and (max-width: 700px) {
+        .e-img-editor-sample {
+            height: 75vh;
+            width: 100%;
+        }
+    }
+
+    .control-wrapper {
+        height: 100%;
+    }
+</style>

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.

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.