Annotation in ASP.NET CORE ImageEditor

26 Aug 202624 minutes to read

The Image Editor lets you add annotations to an image, including text, freehand drawings, and shapes such as rectangles, ellipses, arrows, paths, and lines. These tools help communicate and share ideas more clearly. Users can draw multiple annotations simultaneously, and every action—including customizations—is tracked in the undo/redo collection, so you can safely experiment with different designs.

Text annotation

The text annotation feature in the Image Editor 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, font color, fill color, stroke color, stroke width and font size for the text annotation.

Add text

The drawText method in the Image Editor allows you to insert a text annotation into the image with specific customization options. This method accepts the following parameters:

Parameter Type Default Description
text string — The text to render. Newline characters (\n) start a new line.
x number — X-coordinate of the text, determining its horizontal position within the image.
y number — Y-coordinate of the text, determining its vertical position within the image.
fontFamily string "Arial" Specifies the font family of the text, allowing you to choose a specific typeface or style for the text.
fontSize number 12 Specifies the font size of the text, determining its relative size within the image.
bold boolean false Specifies whether the text should be displayed in bold style. Set to true for bold text, and false for regular text.
italic boolean false Specifies whether the text should be displayed in italic style. Set to true for italic text, and false for regular text.
underline boolean false Renders the text underlined.
strikethrough boolean false Specifies whether the text should have a strikethrough.
color string "#000000" Specifies the font color of the text, allowing you to define the desired color using appropriate color values or names.
fillColor string "transparent" Specifies the background color of the text.
strokeColor string "transparent" Specifies the outline color of the text annotation.
strokeWidth number 1 Specifies the outline stroke width of the text annotation.
degree number 0 Rotation angle, in degrees (-360 to 360).
isSelected boolean false Specifies to show the text in the selected state.
transformCollection ImageEditorTransform[] [] Specifies the transform collection of the text annotation.

Use drawText with these parameters to position and customize text annotations. Add labels, captions, or any text with specific font styles, sizes, and colors to enhance the image’s visual clarity.

Here is an example of adding a text in a button click using drawText method.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="addText" onclick="addTextHandler()" cssClass="e-primary" content="Add Text"></ejs-button>
<ejs-button id="outline" onclick="outlineHandler()" cssClass="e-primary" content="Text Outline"></ejs-button>
<ejs-button id="background" onclick="backgroundHandler()" cssClass="e-primary" content="Text Background Color"></ejs-button>

<script>
    function created() {
        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 addTextHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x, dimension.y, 'Syncfusion');
    }
    function outlineHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x + 50, dimension.y + 50, 'Syncfusion', 'Arial', 30, false, false, '', false, null, '', 'green', 8);
    }
    function backgroundHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x + 100, dimension.y + 100, 'Syncfusion', 'Arial', 30, false, false, '', false, null, 'red', '', null);
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Add multiline text

The drawText method in the Image Editor control is commonly used to insert text annotations into an image. If the provided text parameter contains a newline character (\n), the text will be automatically split into multiple lines, with each line appearing on a separate line in the annotation.

Here is an example of adding a multiline text in a button click using drawText method.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>

<script>
    function created() {
        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 clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x, dimension.y,'Enter\nText');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Delete text

The deleteShape method in the Image Editor control allows you to remove a text annotation from the Image Editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each text annotation within the Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired text element. By specifying the shapeId associated with the text annotation you want to remove, you can effectively delete it from the Image Editor.

To retrieve inserted text annotations, call the getShapeSetting method, which returns a collection of ShapeSettings you can use to find the shapeId of the annotation you want to remove.

The following example deletes a text annotation in a button click handler using deleteShape.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>
<ejs-button id="delBtnClick" onclick="deleteHandler()" content="Delete Text"></ejs-button>

<script>
    function created() {
        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 clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x, dimension.y,'Enter\nText');
    }

    function deleteHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.deleteShape('shape_1');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Customize font family and text color

The shapeChanging event fires when a text annotation is modified through the toolbar. It lets you change the text’s color and font family by adjusting the relevant properties before the change is committed.

Use the shapeChanging event to enhance the customization options for text annotations and provide a tailored, interactive experience within the Image Editor control.

The following example changes the text’s color and font family using the shapeChanging event.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" shapeChanging="shapeChanging" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>

<script>
    function created() {
        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 shapeChanging(args) {
        if (args.currentShapeSettings.type === 'Text') {
            args.currentShapeSettings.color = 'red';
            args.currentShapeSettings.fontFamily = 'Times New Roman';
        }
    }

    function clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x, dimension.y, 'Enter Text');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Add a custom font family

The FontFamily property in the Image Editor control accepts an array of font entries so you can supplement the default font list. Each entry is identified by its id, which the toolbar uses to look up the rendered font.

Use the FontFamily property to broaden the customization options for text annotations. Users then choose from a wider font list in the toolbar.

The following example adds an additional font family to the text annotation using the FontFamily property.

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" fontFamily="@ViewBag.fontFamily"></ejs-imageeditor>
</div>

<script>
    function created() {
        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');
        }
    }
</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>
using Syncfusion.EJ2.ImageEditor;

public ActionResult Default()
{
    ImageEditorFontFamily fontFamily = new ImageEditorFontFamily { Default = "Arial", 
        Items = new object[] {
            new { id = "arial", text = "Arial" },
            new { id = "brush script mt", text = "Brush Script MT" },
            new { id = "papyrus", text = "Papyrus" },
            new { id = "times new roman", text = "Times New Roman" },
            new { id = "courier new", text = "Courier New" }
        }
    };
    ViewBag.fontFamily = fontFamily;
    return View();
}

Output be like the below.

ImageEditor Sample

Format text with bold, italic, underline, and strikethrough

The drawText method in the Image Editor control 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.

@{
    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 && 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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Freehand drawing

The Freehand Draw annotation tool in the Image Editor control lets users draw and sketch directly on the image using mouse or touch input. Use it to add freehand drawings or annotations to the image.

The freehandDraw method enables or disables freehand drawing in the Image Editor control.

The following example toggles freehand drawing in a button click handler.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>
<ejs-button id="applyBtnClick" onclick="applyClickHandler()" cssClass="e-primary" content="Apply"></ejs-button>

<script>
    function created() {
        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 clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.freeHandDraw(true);
    }

    function applyClickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.freeHandDraw(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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Adjust stroke width and color

The shapeChanging event fires when a freehand annotation is modified through the toolbar. It lets you change the freehand annotation’s color and stroke width by adjusting the relevant properties before the change is committed.

Use the shapeChanging event to enhance the customization options for freehand annotations and provide a tailored, interactive experience within the Image Editor control.

The following example changes the freehand draw stroke width and color using the shapeChanging event.

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" shapeChanging="shapeChanging"></ejs-imageeditor>
</div>

<script>
    function created() {
        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 shapeChanging(args) {
        if (args.currentShapeSettings.type === 'FreehandDraw') {
            args.currentShapeSettings.strokeColor = 'red';
            args.currentShapeSettings.strokeWidth = 10;
        }
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Delete a freehand drawing

The deleteShape method in the Image Editor allows you to remove a freehand annotation from the Image Editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each freehand annotation within the Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired annotation. By specifying the shapeId associated with the freehand annotation you want to remove, you can effectively delete it from the Image Editor.

To retrieve inserted freehand annotations, call the getShapeSetting method, which returns a collection of ShapeSettings you can use to find the shapeId of the annotation you want to remove.

The following example deletes a freehand annotation in a button click handler using deleteShape.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created"  toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Enable freehand drawing"></ejs-button>
<ejs-button id="delbtnClick" onclick="delclickHandler()" cssClass="e-primary" content="Delete freehand drawing"></ejs-button>

<script>
    function created() {
        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 clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.freeHandDraw(true);
    }

    function delclickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.deleteShape('pen_1');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Shape annotations

The Image Editor control provides the ability to add shape annotations to an image. These shape annotations include rectangles, ellipses, arrows, paths, and lines, allowing you to highlight, emphasize, or mark specific areas or elements within the image.

Add a rectangle, ellipse, line, arrow, or path

The drawRectangle method is used to insert a rectangle into the Image Editor control. Rectangle annotations are valuable tools for highlighting, emphasizing, or marking specific areas of an image to draw attention or provide additional context.

The drawRectangle method in the Image Editor control takes ten parameters to define the properties of the rectangle annotation:

  • x: Specifies the x-coordinate of the top-left corner of the rectangle.

  • y: Specifies the y-coordinate of the top-left corner of the rectangle.

  • width: Specifies the width of the rectangle.

  • height: Specifies the height of the rectangle.

  • strokeWidth: Specifies the stroke width of the rectangle’s border.

  • strokeColor: Specifies the stroke color of the rectangle’s border.

  • fillColor: Specifies the fill color of the rectangle.

  • degree: Specifies the degree to rotate the rectangle.

  • isSelected: Specifies to show the rectangle in the selected state.

  • borderRadius: Specifies the radius to apply border radius to rectangle.

The drawEllipse method is used to insert an ellipse into the Image Editor control. Ellipse annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawEllipse method in the Image Editor control takes nine parameters to define the properties of the ellipse annotation:

  • x: Specifies the x-coordinate of the center of the ellipse.

  • y: Specifies the y-coordinate of the center of the ellipse.

  • radiusX: Specifies the horizontal radius (radiusX) of the ellipse.

  • radiusY: Specifies the vertical radius (radiusY) of the ellipse.

  • strokeWidth: Specifies the width of the ellipse’s stroke (border).

  • strokeColor: Specifies the color of the ellipse’s stroke (border).

  • fillColor: Specifies the fill color of the ellipse.

  • degree: Specifies the degree to rotate the ellipse.

  • isSelected: Specifies to show the ellipse in the selected state.

The drawLine method is used to insert a line into the Image Editor control. Line annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawLine method in the Image Editor control takes six parameters to define the properties of the line annotation:

  • startX - Specifies the x-coordinate of the start point.

  • startY - Specifies the y-coordinate of the start point.

  • endX - Specifies the x-coordinate of the end point.

  • endY - Specifies the y-coordinate of the end point.

  • strokeWidth - Specifies the stroke width of the line.

  • strokeColor - Specifies the stroke color of the line.

  • isSelected: Specifies to show the line in the selected state.

The drawArrow method is used to insert an arrow into the Image Editor control. Arrow annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawArrow method in the Image Editor control takes nine parameters to define the properties of the arrow annotation:

  • startX - Specifies the x-coordinate of the start point.

  • startY - Specifies the y-coordinate of the start point.

  • endX - Specifies the x-coordinate of the end point.

  • endY - Specifies the y-coordinate of the end point.

  • strokeWidth - Specifies the stroke width of the arrow.

  • strokeColor - Specifies the stroke color of the arrow.

  • arrowStart - Specifies the arrowhead as ImageEditorArrowHeadType at the start of arrow.

  • arrowEnd - Specifies the arrowhead as ImageEditorArrowHeadType at the end of the arrow.

  • isSelected: Specifies to show the arrow in the selected state.

The drawPath method is used to insert a path into the Image Editor control. Path annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.

The drawPath method in the Image Editor control takes four parameters to define the properties of the path annotation:

  • points - Specifies collection of x and y coordinates as ImageEditorPoint to draw a path.

  • strokeWidth - Specifies the stroke width of the path.

  • strokeColor - Specifies the stroke color of the path.

  • isSelected: Specifies to show the path in the selected state.

Here is an example of inserting rectangle, ellipse, arrow, path, and line in a button click event.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick1" onclick="clickHandler1()" cssClass="e-primary" content="Rectangle"></ejs-button>
<ejs-button id="btnClick2" onclick="clickHandler2()" cssClass="e-primary" content="Ellipse"></ejs-button>
<ejs-button id="btnClick3" onclick="clickHandler3()" cssClass="e-primary" content="Line"></ejs-button>
<ejs-button id="btnClick4" onclick="clickHandler4()" cssClass="e-primary" content="Arrow"></ejs-button>
<ejs-button id="btnClick5" onclick="clickHandler5()" cssClass="e-primary" content="Path"></ejs-button>

<script>
    function created() {
        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 clickHandler1() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imgObj.getImageDimension();
        imgObj.drawRectangle(dimension.x + 10, dimension.y + 60, 150, 70);
        imgObj.drawRectangle(dimension.x + 250, dimension.y + 60, 150, 70, null, '', '', null, null, 8);
    }

    function clickHandler2() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imgObj.getImageDimension();
        imgObj.drawEllipse(dimension.x, dimension.y + 200);
    }

    function clickHandler3() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imgObj.getImageDimension();
        imgObj.drawLine(dimension.x + 300, dimension.y + 30);
    }

    function clickHandler4() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imgObj.getImageDimension();
        imgObj.drawArrow(dimension.x + 150, dimension.y + 150, dimension.x + 300, dimension.y + 150, 10);
    }

    function clickHandler5() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imgObj.getImageDimension();
        imgObj.drawPath([{ x: dimension.x, y: dimension.y }, { x: dimension.x + 50, y: dimension.y + 50 }, { x: dimension.x + 20, y: dimension.y + 50 }], 8);
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Delete a shape

The deleteShape method in the Image Editor allows you to remove a shape annotation from the Image Editor. To use this method, you need to pass the shapeId of the annotation as a parameter.

The shapeId is a unique identifier assigned to each shape annotation within the Image Editor. It serves as a reference to a specific annotation, enabling targeted deletion of the desired annotation. By specifying the shapeId associated with the shape annotation you want to remove, you can effectively delete it from the Image Editor.

To retrieve inserted shape annotations, call the getShapeSetting method, which returns a collection of ShapeSettings you can use to find the shapeId of the annotation you want to remove.

The following example deletes a shape annotation in a button click handler using deleteShape.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Add Shape"></ejs-button>
<ejs-button id="delBtnClick" onclick="deleteHandler()" content="Delete Shape"></ejs-button>

<script>
    function created() {
        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 clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawRectangle(dimension.x, dimension.y);
    }

    function deleteHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imageEditorObj.deleteShape('shape_1');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Customize default stroke color for shapes

Default settings for stroke color, stroke width, fill color, and other customizations are exposed on the editor. To modify only the defaults while preserving previously selected customizations, use the shapeChanging event. Inside the event handler, update the values in the currentShapeSettings object to apply your own preferences instead of the defaults. This allow you conditionally update currentShapeSettings, so only the desired defaults change while the other settings remain intact.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" shapeChanging="shapeChanging" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="clickHandler()" cssClass="e-primary" content="Click"></ejs-button>

<script>
    function created() {
        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 shapeChanging(args) {
        if (args.currentShapeSettings.type === 'Rectangle') {
            args.currentShapeSettings.strokeColor = 'red';
        }
    }

    function clickHandler() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        var dimension = imageEditorObj.getImageDimension();
        imageEditorObj.drawText(dimension.x, dimension.y, 'Enter\nText');
    }
</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>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample

Image annotations

The image annotation feature in the Image Editor provides the capability to add and customize images directly onto the image. With this feature, you can easily insert images or icons at specific locations within the image and customize various aspects of the image to meet your requirements. You have control over the customization options including rotate, flip, transparency for the image annotation.

Add an image annotation

The drawImage method serves the purpose of inserting an image into the Image Editor control, allowing for image annotations to be added. These image annotations can be used for various purposes, such as adding logos, watermarks, or decorative elements to the image.

The drawImage method in the Image Editor control takes nine parameters to define the properties of the image annotation:

  • data: Specifies the image data or URL of the image to be inserted.

  • x: Specifies the x-coordinate of the top-left corner of the image.

  • y: Specifies the y-coordinate of the top-left corner of the image.

  • width: Specifies the width of the image.

  • height: Specifies the height of the image.

  • isAspectRatio: Specifies whether the image is rendered with aspect ratio or not.

  • degree: Specifies the degree to rotate the image.

  • opacity: Specifies the value for the image.

  • isSelected: Specifies to show the image in the selected state.

In the following example, you can use the drawImage method in the button click event.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="btnClick" onclick="btnClick()" cssClass="e-primary" content="Add Image"></ejs-button>

<script>
    function created() {
        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 btnClick() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        imgObj.drawImage('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png', 500, 100, 200, 80, true, 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%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample