Selection cropping in Vue Image editor component
16 Mar 202311 minutes to read
The Image Editor control has multiple selection options including custom, square, circle, and customized to various aspects ratios. The selection region can be dragged and resized for cropping an image. The selection can be made by either using a toolbar or the select
method.
In the select
method, the selection type needs to be specified as a custom, square, circle, and aspect ratios such as 3:2, 4:3, 5:4, 7:5, 16:9.
In the toolbar, the selection can be made by clicking the crop dropdown button and picking the selection option such as custom, square, circle, and aspect ratios.
Custom
The selection region can be customized by dragging and resizing an image.
In the toolbar, the custom selection can be done by clicking the crop dropdown button and picking the Custom
option from that popup.
In the following example, the select
method is used in the button click to the custom selection.
<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.select("Custom");
}
}
}
</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>
Square
The selection region can be customized as a square. That square can be dragged and resized. In the toolbar, the square selection can be done by clicking the crop dropdown button and picking the Square
option from that popup.
In the following example, the select
method is used in the button click to the square selection.
<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.select("Square");
}
}
}
</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>
Circle
The selection region can be customized as a circle. That circle can be moved and resized. In the toolbar, the circle selection can be done by clicking the crop dropdown button and picking the Circle
option from that popup.
In the following example, the select
method is used in the button click to the circle selection.
<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.select("Circle");
}
}
}
</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>
Ratio
The selection region can be customized according to the predefined ratios including 4:3, 7:5, 16:9, and more. In the toolbar, the Ratio selection can be done by clicking the crop dropdown button and picking the 4:3, 7:5, or 16:9 option from that popup.
In the following example, the select
method is used in the button click to the ratio selection.
<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.select("16:9");
}
}
}
</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>
Cropping
The Image Editor control crops the image based on the selection. The cropping can be made by either using a toolbar or the crop method.
In the toolbar, cropping can be made by clicking the OK button which is enabled only after performing the selection.
In the following example, the select
and crop
method is used in the button click event to perform selection and cropping.
<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.select("Circle");
this.$refs.imageEditorObj.ej2Instances.crop("");
}
}
}
</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>