JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Annotation in JavaScript ImageEditor control

08 May 2023 / 7 minutes to read

The Image Editor has multiple annotations support including text, freehand drawings, and shapes such as rectangles, ellipses, and lines.

Text

The Text annotation can be inserted and customized by changing its color, font family, font size, and font styles such as bold and italic. The text annotation can be made by either using a toolbar or drawText method.

In drawText method, the text annotation can be inserted by specifying the text, font family, font size, and font styles. The drawText method has the following parameters.

  • x - Specifies x-coordinate of the text
  • y - Specifies y-coordinate of the text
  • text - Specifies the text to add to an image
  • fontFamily - Specifies the font family of the text.
  • fontSize - Specifies the font size of the text.
  • bold - Specifies whether the text is bold or not.
  • italic - Specifies whether the text is italic or not.
  • color - Specifies font color of the text.

In the toolbar, the text annotation can be inserted by clicking the Annotation dropdown button and picking the Add Text option from that popup. Once the text is inserted, the contextual toolbar will be enabled for customizing its color, font family, font size, and font styles such as bold and italic.

In the following example, you can using the drawText method in the button click event.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

 let imageEditorObj: ImageEditor = new ImageEditor({
width: '550px',
height: '330px',
toolbar: [],
created: () => {
    if (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');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

 //Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
   imageEditorObj.drawText(140, 130, 'Syncfusion', 'Arial', 50, true, true, '#000');
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Click</button>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard

Freehand Draw

This annotation can be customized by changing the pen color and stroke width and it can be made by either using a toolbar or the freeHandDraw method.

The freeHandDraw method is used to enable or disable a freehand drawing option in an Image Editor.

In the toolbar, the freehand draw annotation can be inserted by clicking the Annotation dropdown button and picking the Pen option from that popup. Once the freehand draw is enabled, the contextual toolbar will be enabled.

In the following example, the freeHandDraw method is used to toggle the freehand drawings.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

 let imageEditorObj: ImageEditor = new ImageEditor({
width: '550px',
height: '330px',
toolbar: [],
created: () => {
    if (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');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

 //Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
   imageEditorObj.freeHandDraw(true);
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Click</button>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard

Shapes

The shape annotations include rectangles, ellipses, and lines. The border color, fill color, and border width of the shapes can be customized.

Rectangle

The Rectangle shape can be inserted and customized by changing its border color, fill color, and border width. The Rectangle shape can be made by either using a toolbar or the drawRectangle method.

In the drawRectangle method, the rectangle shape can be inserted by specifying fillcolor, stroke color and stroke width. The drawRectangle method has the following parameters.

  • x - Specifies the x-coordinate of the rectangle.
  • y - Specifies the y-coordinate 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.
  • strokeColor - Specifies the stroke color of the rectangle.
  • fillColor - the fill color of the rectangle.

In the toolbar, the Rectangle shape can be inserted by clicking the Annotation dropdown button and picking the Rectangle option from that popup. Once the shape is inserted, the contextual toolbar will be enabled for customizing its fill color, stroke color, and stroke width.

In the following example, the drawRectangle method is used to draw the rectangle.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

 let imageEditorObj: ImageEditor = new ImageEditor({
width: '550px',
height: '330px',
toolbar: [],
created: () => {
    if (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');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

 //Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
    imageEditorObj.drawRectangle(200, 110, 150, 100, 4, "#fff", 'blue');
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Click</button>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard

Ellipse

The Ellipse shape can be inserted and customized by changing its border color, fill color, and border width. The Ellipse shape can be made by either using a toolbar or the drawEllipse method.

In the drawEllipse method, the ellipse shape can be inserted by specifying fillcolor, stroke color and stroke width. The drawEllipse method has the following parameters.

  • x - Specifies the x-coordinate of the ellipse.
  • y - Specifies the y-coordinate of the ellipse.
  • radiusX - the radius x point for the ellipse.
  • radiusY - the radius y point for the ellipse.
  • strokeWidth - the stroke width of the ellipse.
  • strokeColor - the stroke color of the ellipse.
  • fillColor - the fill color of the ellipse.

In the toolbar, the Ellipse shape can be inserted by clicking the Annotation dropdown button and picking the Ellipse option from that popup. Once the shape is inserted, the contextual toolbar will be enabled for customizing its fill color, stroke color, and stroke width.

In the following example, the drawEllipse method is used to draw the ellipse.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

 let imageEditorObj: ImageEditor = new ImageEditor({
width: '550px',
height: '330px',
toolbar: [],
created: () => {
    if (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');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

 //Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
    imageEditorObj.drawEllipse(200, 100, 70, 70, 4, "#fff", 'green');
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Click</button>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard

Line

The line shape can be inserted and customized by changing its border color, and border width. The Line shape can be made by either using a toolbar or the drawLine method.

In the drawLine method, the line shape can be inserted by specifying, stroke color and stroke width. The drawLine method has the following parameters:

  • startX – Specifies start point x-coordinate of line.
  • startY – Specifies start point y-coordinate of line.
  • endX - Specifies endpoint x-coordinates of line.
  • endY - Specifies end point y-coordinates of the line.
  • strokeWidth - Specifies the stroke width of the line.
  • strokeColor - Specifies the stroke color of the line.

In the toolbar, the Line shape can be inserted by clicking the Annotation dropdown button and picking the Line option from that popup. Once the line shape is inserted, the contextual toolbar will be enabled for customizing its stroke color, and stroke width.

In the following example, the drawLine method is used to draw the line.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Button } from '@syncfusion/ej2-buttons';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

 let imageEditorObj: ImageEditor = new ImageEditor({
width: '550px',
height: '330px',
toolbar: [],
created: () => {
    if (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');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

 //Button click
let button: Button = new Button({cssClass: `e-primary`, content:'Click'}, '#btnClick');
document.getElementById('btnClick').onclick = (): void => {
    imageEditorObj.drawLine(400, 150, 200, 200, 2, "blue");
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet" />


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row">
            </div>
            <div> 
                <button id='btnClick' class='e-btn e-primary' >Click</button>
            </div>
        </div>
    </div>
</body>

</html>
Copied to clipboard
Previous
Next