Having trouble getting help?
Contact Support
Contact Support
Straightening in the Vue Image Editor control
11 Jun 20244 minutes to read
The straightening feature in an Image Editor allows users to adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation.
Apply straightening to the image
The Image Editor control includes a straightenImage
method, which allows you to adjust the degree of an image. This method takes one parameter that define how the straightening should be carried out:
- degree: Specifies the amount of rotation for straightening the image. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.
Here is an example of straightening the image using the straightenImage
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">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>