Annotation in the Vue Image Editor component
1 Oct 202424 minutes to read
The Vue Image Editor allows adding annotations to the image, including text, freehand drawings, and shapes like rectangles, ellipses, arrows, paths, and lines. This gives the flexibility to mark up the image with notes, sketches, and other visual elements as needed. These annotation tools can help to communicate and share ideas more effectively. Users are allowed to draw multiple annotations simultaneously, enhancing creative flexibility. Furthermore, every action, including customizations, will be tracked in the undo/redo collection, ensuring a seamless user experience and making it easier to 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 a text
The drawText method in the Vue Image Editor allows you to insert a text annotation into the image with specific customization options. This method accepts the following parameters:
-
x: Specifies the x-coordinate of the text, determining its horizontal position within the image.
-
y: Specifies the y-coordinate of the text, determining its vertical position within the image.
-
text: Specifies the actual text content to be added to the image.
-
fontFamily: Specifies the font family of the text, allowing you to choose a specific typeface or style for the text.
-
fontSize: Specifies the font size of the text, determining its relative size within the image.
-
bold: Specifies whether the text should be displayed in bold style. Set to true for bold text, and false for regular text.
-
italic: Specifies whether the text should be displayed in italic style. Set to true for italic text, and false for regular text.
-
color: Specifies the font color of the text, allowing you to define the desired color using appropriate color values or names.
-
isSelected: Specifies to show the text in the selected state.
-
degree: Specifies the degree to rotate the text.
-
fillColor: Specifies the background color of the text.
-
strokeColor: Specifies the outline color of the text annotation.
-
strokeWidth: Specifies the outline stroke width of the text annotation.
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.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Text</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="outlineText">Text Outline</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="bgColor">Background Color</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.jpeg');
} else {
imageEditorObj.value.open('bridge.jpeg');
}
};
const btnClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y, 'Syncfusion');
};
const outlineText = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y+100, 'Syncfusion', 'Arial', 70, false, false, '', false, null, '', 'green', 8);
};
const bgColor = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y+150, 'Syncfusion', 'Arial', 70, false, false, '', false, null, 'red', '', null);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Text</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="outlineText">Text Outline</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="bgColor">Background Color</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
btnClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y, 'Syncfusion');
},
outlineText: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y+100, 'Syncfusion', 'Arial', 70, false, false, '', false, null, '', 'green', 8);
},
bgColor: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y+150, 'Syncfusion', 'Arial', 70, false, false, '', false, null, 'red', '', null);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Multiline text
The drawText method in the Vue Image Editor component 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.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Text</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const btnClick = () => {
let dimension = imageEditorObj.value.getImageDimension();
imageEditorObj.value.drawText(dimension.x,dimension.y,'Enter\nText');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Text</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
btnClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x,dimension.y,'Enter\nText');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Delete a text
The deleteShape method in the Vue Image Editor 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 the inserted text annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings. This method allows you to access and work with the annotations that have been inserted into the image.
Here is an example of deleting a text in a button click using deleteShape method.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="drawClick">Text</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const drawClick = () => {
let dimension = imageEditorObj.value.getImageDimension();
imageEditorObj.value.drawText(dimension.x,dimension.y,'Enter\nText');
};
const btnClick = () => {
imageEditorObj.value.deleteShape('shape_1');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="drawClick">Text</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
drawClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x,dimension.y,'Enter\nText');
},
btnClick: function() {
this.$refs.imageEditorObj.ej2Instances.deleteShape('shape_1');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Customize font family and text color
The shapeChanging event in the Image Editor component is triggered when a text annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the text’s color and font family by adjusting the relevant properties.
By leveraging the shapeChanging event, you can enhance the customization options for text annotations and provide a more tailored and interactive experience within the Image Editor component.
Here is an example of changing the text’s color and its font family using the shapeChanging event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :shapeChanging="shapeChanging" ></ejs-imageeditor>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
import {ref} from 'vue';
const imageEditorObj = ref(null);
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const shapeChanging = (args) => {
if (args.currentShapeSettings.type === 'Text') {
args.currentShapeSettings.color = 'red',
args.currentShapeSettings.fontStyle = ['bold'],
args.currentShapeSettings.fontSize = 20,
args.currentShapeSettings.text = 'Syncfusion'
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :shapeChanging="shapeChanging" ></ejs-imageeditor>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent
},
data: function() {
return {};
},
methods: {
shapeChanging: function(args) {
if (args.currentShapeSettings.type === 'Text') {
args.currentShapeSettings.color = 'red',
args.currentShapeSettings.fontStyle = ['bold'],
args.currentShapeSettings.fontSize = 20,
args.currentShapeSettings.text = 'Syncfusion'
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Add Additional font family
The fontFamily property in the Image Editor control provides the flexibility to incorporate supplementary font families, expanding your options for text styling and ensuring a broader range of fonts can be utilized within your design or content. The font value will be determined by the ‘id’ property.
By leveraging the fontFamily property, you can elevate the scope of customization for text annotations, enriching the user experience within the Image Editor control. This enhancement offers a more personalized and dynamic interaction, empowering users to tailor their text styles for a truly engaging editing experience.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="brushscriptBtn">Brush Script MT</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="papyrusBtn">Papyrus</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="timesnewromanBtn">Times New Roman</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="couriernewBtn">Courier New</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const fontFamily = { default: 'Arial', items: [{id: 'arial', text: 'Arial'}, {id: 'brush script mt', text: 'Brush Script MT'},
{id: 'papyrus', text: 'Papyrus'}, {id: 'times new roman', text: 'Times New Roman'}, {id: 'courier new', text: 'Courier New'}] };
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const couriernewBtn = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Courier New');
};
const brushscriptBtn = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Brush Script MT');
};
const papyrusBtn = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Papyrus');
};
const timesnewromanBtn = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawText(dimension.x,dimension.y, 'EnterText', 'Times New Roman');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="brushscriptBtn">Brush Script MT</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="papyrusBtn">Papyrus</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="timesnewromanBtn">Times New Roman</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="couriernewBtn">Courier New</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: [],
fontFamily: { default: 'Arial', items: [{id: 'arial', text: 'Arial'}, {id: 'brush script mt', text: 'Brush Script MT'},
{id: 'papyrus', text: 'Papyrus'}, {id: 'times new roman', text: 'Times New Roman'}, {id: 'courier new', text: 'Courier New'}] }
};
},
methods: {
couriernewBtn: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Courier New');
},
brushscriptBtn: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Brush Script MT');
},
papyrusBtn: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x, dimension.y, 'EnterText', 'Papyrus');
},
timesnewromanBtn: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawText(dimension.x,dimension.y, 'EnterText', 'Times New Roman');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Freehand drawing
The Freehand Draw annotation tool in the Vue 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.
The freehandDraw method is used to enable or disable the freehand drawing option in the Vue Image Editor component.
Here is an example of using the freeHandDraw method in a button click event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Freehand draw</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const btnClick = () => {
imageEditorObj.value.ej2Instances.freeHandDraw(true);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Freehand draw</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageeditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
btnClick: function() {
this.$refs.imageEditorObj.ej2Instances.freeHandDraw(true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Delete a freehand drawing
The deleteShape method in the Vue 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 the inserted freehand annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings. This method allows you to access and work with the annotations that have been inserted into the image.
Here is an example of deleting a freehand annotation in a button click using deleteShape method.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="drawClick">Draw</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref} from 'vue';
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const drawClick = () => {
imageEditorObj.value.ej2Instances.freeHandDraw(true);
};
const btnClick = () => {
imageEditorObj.value.ej2Instances.deleteShape('pen_1');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="drawClick">Draw</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
drawClick: function() {
this.$refs.imageEditorObj.ej2Instances.freeHandDraw(true);
},
btnClick: function() {
this.$refs.imageEditorObj.ej2Instances.deleteShape('pen_1');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Adjust the stroke width and color
The shapeChanging event in the Vue Image Editor component is triggered when a freehand annotation is being modified or changed through the toolbar interaction. This event provides an opportunity to make alterations to the freehand annotation’s color and stroke width by adjusting the relevant properties.
By leveraging the shapeChanging event, you can enhance the customization options for freehand annotations and provide a more tailored and interactive experience within the Image Editor component.
Here is an example of changing the freehand draw stroke width and color using the shapeChanging event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :shapeChanging="shapeChanging"></ejs-imageeditor>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
const imageEditorObj = ref(null);
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const shapeChanging = (args) => {
if (args.currentShapeSettings.type === 'pen') {
args.currentShapeSettings.strokeColor = 'red',
args.currentShapeSettings.strokeWidth = 10
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :shapeChanging="shapeChanging"></ejs-imageeditor>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent
},
data: function() {
return {};
},
methods: {
shapeChanging: function(args) {
if (args.currentShapeSettings.type === 'pen') {
args.currentShapeSettings.strokeColor = 'red',
args.currentShapeSettings.strokeWidth = 10
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Shape annotation
The Image Editor component 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 / path
The drawRectangle method is used to insert a rectangle to the Vue Image Editor component. 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 Vue Image Editor component 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 a ellipse to the Vue Image Editor component. Ellipse annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.
The drawEllipse method in the Vue Image Editor component takes seven 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 to the Vue Image Editor component. Line annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.
The drawLine method in the Vue Image Editor component takes seven parameters to define the properties of the ellipse 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 a arrow to the Vue Image Editor component. Arrow annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.
The drawArrow method in the Vue Image Editor component takes seven parameters to define the properties of the ellipse 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 to the Vue Image Editor component. Path annotations are valuable for highlighting, emphasizing, or marking specific areas of an image.
The drawPath method in the Vue Image Editor component takes three parameters to define the properties of the ellipse 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.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="rectangleClick">Rectangle</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="ellipseClick">Ellipse</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="lineClick">Line</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="pathClick">Path</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="arrowClick">Arrow</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const toolbar = [];
const imageEditorObj = ref(null);
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const rectangleClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawRectangle(dimension.x, dimension.y, 200, 100);
imageEditorObj.value.ej2Instances.drawRectangle(dimension.x + 300, dimension.y, 200, 100, null, '', '', null, null, 8);
};
const ellipseClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawEllipse(dimension.x,dimension.y);
};
const lineClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawLine(dimension.x,dimension.y);
};
const pathClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawPath([{x: dimension.x, y: dimension.y}, {x: dimension.x+50, y: dimension.y+50}, {x: dimension.x+20, y: dimension.y+50}], 8);
};
const arrowClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10,);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="rectangleClick">Rectangle</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="ellipseClick">Ellipse</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="lineClick">Line</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="pathClick">Path</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="arrowClick">Arrow</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent,
},
data: function() {
return {
toolbar: []
};
},
methods: {
rectangleClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawRectangle(dimension.x, dimension.y, 200, 100);
this.$refs.imageEditorObj.ej2Instances.drawRectangle(dimension.x + 300, dimension.y, 200, 100, null, '', '', null, null, 8);
},
ellipseClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawEllipse(dimension.x,dimension.y);
},
lineClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawLine(dimension.x,dimension.y);
},
pathClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawPath([{x: dimension.x, y: dimension.y}, {x: dimension.x+50, y: dimension.y+50}, {x: dimension.x+20, y: dimension.y+50}], 8);
},
arrowClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawArrow(dimension.x, dimension.y+10, dimension.x+50, dimension.y+10, 10,);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Delete a shape
The deleteShape method in the Vue 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 the inserted shape annotations, you can utilize the getShapeSetting method, which provides a collection of annotations represented by ShapeSettings. This method allows you to access and work with the annotations that have been inserted into the image.
Here is an example of deleting rectangle, ellipse, arrow, path, and line in a button click event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :shapeChanging="shapeChanging" :showQuickAccessToolbar=false :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete shape</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = ['Annotate','Rectangle','Ellipse', 'Line', 'Arrow', 'Path'];
const id = '';
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const shapeChanging = (event) => {
if(event.action === 'select') {
id = event.currentShapeSettings.id;
}
};
const btnClick = () => {
imageEditorObj.value.ej2Instances.deleteShape(id);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :shapeChanging="shapeChanging" :showQuickAccessToolbar=false :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Delete shape</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: ['Annotate','Rectangle','Ellipse', 'Line', 'Arrow', 'Path'],
id: '',
};
},
methods: {
shapeChanging: function(event) {
if(event.action === 'select') {
this.id = event.currentShapeSettings.id;
}
},
btnClick: function() {
this.$refs.imageEditorObj.ej2Instances.deleteShape(this.id);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Image annotation
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 image 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 six parameters to define the properties of the image annotation:
-
data: Specified 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.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Add Image</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const toolbar = [];
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.png');
} else {
imageEditorObj.value.open('bridge.png');
}
};
const btnClick = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawImage('flower.png', dimension.x, dimension.y, 100, 80, true, 0);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="btnClick">Add Image</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
toolbar: []
};
},
methods: {
btnClick: function() {
let dimension = this.$refs.imageEditorObj.ej2Instances.getImageDimension();
this.$refs.imageEditorObj.ej2Instances.drawImage('flower.png', dimension.x, dimension.y, 100, 80, true, 0);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>Customize Default Stroke Color for Shapes
We provide default settings for stroke color, stroke width, fill color, and other customizations. If users wish to modify only the default options while preserving their previously selected customizations, they can do so by utilizing the shapeChanging event. Within this event, users can update the values in the currentShapeSettings object to apply their own preferences instead of the defaults. This approach allows conditional updates to the currentShapeSettings, ensuring that only the desired defaults are changed while maintaining the other settings.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :shapeChanging="shapeChanging" :created="created"></ejs-imageeditor>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent as EjsButton} from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
import { ref } from "vue";
const imageEditorObj = ref(null);
const changeColor = true;
const created = () => {
if (Browser.isDevice) {
imageEditorObj.value.open('flower.jpeg');
} else {
imageEditorObj.value.open('bridge.jpeg');
}
};
const shapeChanging = () => {
if (changeColor && args.action == "insert" && args.currentShapeSettings?.type === 'FreehandDraw') {
args.currentShapeSettings.strokeColor = 'red';
changeColor = false;
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style><template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :shapeChanging="shapeChanging"></ejs-imageeditor>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { Browser } from "@syncfusion/ej2-base";
export default {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent,
"ejs-button":ButtonComponent
},
data: function() {
return {
};
},
methods: {
shapeChanging: function() {
if (changeColor && args.action == "insert" && args.currentShapeSettings?.type === 'FreehandDraw') {
args.currentShapeSettings.strokeColor = 'red';
changeColor = false;
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";
#image-editor {
width: 550px !important;
height: 350px !important;
}
</style>