Transform in Vue Image editor component
16 Mar 202311 minutes to read
The Image Editor has the rotate, flip, and zoom transformation options and it transforms the image editor with annotations.
Rotate
Rotate images with annotation to 90, 180, 270, and 360 degrees clockwise and anti-clockwise. Rotating the image can be done by either using a toolbar or rotate
method.
In the rotate
method, the image can be rotated left or right. The rotate method has the following parameters. A Positive integer value for clockwise and a negative integer value for anti-clockwise rotation.
* degree - Specifies a degree to rotate an image.
In the toolbar, rotate the image by clicking the Transform dropdown button and picking the RotateLeft/ RotateRight option from that popup.
In the following example, the rotate
method is used to rotate the image.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click.native="btnClick">Click</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
},
methods: {
created: function() {
if (Browser.isDevice) {
this.$refs.imageEditorObj.open('images/flower.png');
} else {
this.$refs.imageEditorObj.open('images/bridge.png');
}
},
btnClick: function(event) {
this.$refs.imageEditorObj.ej2Instances.rotate(90);
}
}
}
</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>
Flip
Flip images with annotations horizontally/vertically. Flipping the image can be done by either using a toolbar or the flip method.
In the flip method, the image can be flipped horizontally or vertically. The flip
method has the following parameters:
* direction - Specifies the direction to flip the image.
In the toolbar, flip the image by clicking the Transform dropdown button and picking the Horizontal Flip/Vertical Flip option from that popup.
In the following example, the flip
method is used to flip the image.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click.native="btnClick">Click</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
},
methods: {
created: function() {
if (Browser.isDevice) {
this.$refs.imageEditorObj.open('images/flower.png');
} else {
this.$refs.imageEditorObj.open('images/bridge.png');
}
},
btnClick: function(event) {
this.$refs.imageEditorObj.ej2Instances.flip("Horizontal"); // Horizontal flip
}
}
}
</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>
Zoom
Magnify the image using zooming, and panning to see the hidden zones of an image. To Zoom the image can be done by either using a toolbar or the zoom
method.
In zoom
method, the image can be zoom in and zoom out. The zoom method has the following parameters.
* value - Specifies a value to be zoomed on the image.
Zoom in
To perform the Zoom in the image. In toolbar, you can clicking the Zoom In button in toolbar.
In the following example, you can using the zoom
method in the button click event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click.native="btnClick">Click</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
},
methods: {
created: function() {
if (Browser.isDevice) {
this.$refs.imageEditorObj.open('images/flower.png');
} else {
this.$refs.imageEditorObj.open('images/bridge.png');
}
},
btnClick: function(event) {
this.$refs.imageEditorObj.ej2Instances.zoom(.1); // Zoom in
}
}
}
</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>
Zoom out
To perform the Zoom out the image, In toolbar, you can clicking the Zoom out button in toolbar.
In the following example, you can using the zoom
method in the button click event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click.native="btnClick">Click</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
},
methods: {
created: function() {
if (Browser.isDevice) {
this.$refs.imageEditorObj.open('images/flower.png');
} else {
this.$refs.imageEditorObj.open('images/bridge.png');
}
},
btnClick: function(event) {
this.$refs.imageEditorObj.ej2Instances.zoom(-.1); // Zoom out
}
}
}
</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>
Panning
To Perform the panning. Enabled or disables the panning option. In toolbar, you can clicking the Zoom in button in toolbar, then pan button enabled
In the following example, you can use the pan
method in the button click event.
<template>
<div>
<ejs-imageeditor id="image-editor" ref="imageEditorObj" height="350px" width="550px" :created="created"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click.native="btnClick">Click</ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { Browser } from "@syncfusion/ej2-base";
Vue.use(ImageEditorPlugin);
export default {
data: function() {
return {};
},
methods: {
created: function() {
if (Browser.isDevice) {
this.$refs.imageEditorObj.open('images/flower.png');
} else {
this.$refs.imageEditorObj.open('images/bridge.png');
}
},
btnClick: function(event) {
this.$refs.imageEditorObj.ej2Instances.zoom(.1); // Zoom in
this.$refs.imageEditorObj.ej2Instances.pan(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>