- Apply redact to the image
- Selecting a redact
- Deleting a redact
- Updating a redact
- Getting redacts
Contact Support
Redact in the Vue Image Editor component
20 Sep 20249 minutes to read
The redact feature in an Image Editor is a valuable tool that empowers users to conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information.
Apply redact to the image
The Image Editor control includes a drawRedact
method, which allows you to draw redaction on an image. This method takes six parameters that define how the redact should be carried out:
-
type: Specifies the type of redaction to be drawn on the image such as blur or pixelate. If not specified, the redaction drawing is initiated with the default blur value.
-
x: Specifies x-coordinate of redaction. If not specified, the redaction drawing is initiated with the first parameter.
-
y: Specifies y-coordinate of redaction. If not specified it draws redaction from the center point of the image.
-
width: Specifies the width of redaction. The default value is 100.
-
height: Specifies the height of redaction. The default value is 50.
-
value: Specifies the blur value for blur-type redaction or the pixel size for pixelate-type redaction. Defaults to 20 since the default redaction is blur.
Selecting a redact
The Image Editor control includes a selectRedact
method, which allows you to select a redaction based on the given redaction id. Use getRedacts
method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out:
- id: Specifies the shape id to select a redact on an image.
Deleting a redact
The Image Editor control includes a deleteRedact
method, which allows you to delete a redaction based on the given redaction id. Use getRedacts
method to get the redaction id which is then passed to perform selection. This method takes one parameter that define how the redact should be carried out:
- id: Specifies the shape id to delete a redact on an image.
Updating a redact
The Image Editor control includes a updateRedact
method, which allows you to update the existing redacts by changing its height, width, blur, and pixel size in the component. Use getRedacts
method to get the redacts which is then passed to change the options of a redacts. This method takes two parameters that define how the redact should be carried out:
-
setting: Specifies the redact settings to be updated for the shape on an image.
-
isSelected: Specifies to show the redacts in the selected state.
Getting redacts
The Image Editor control includes a getRedacts
method, which allows you to get all the redact details which is drawn on an image editor.
Here’s an example demonstrating how to draw, select, delete, update, and get redacts on an image using the drawRedact
, selectRedact
, deleteRedact
, updateRedact
and getRedacts
methods.
<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="addRedact">Add Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="updateRedact">Update Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="selRedact">Select Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="delRedact">Delete Redact</ejs-button>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor, RedactType} 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 addRedact = () => {
let dimension = imageEditorObj.value.ej2Instances.getImageDimension();
imageEditorObj.value.ej2Instances.drawRedact(RedactType.Blur, dimension?.x, dimension.y, 200, 300);
};
const updateRedact = () => {
let redacts = imageEditorObj.value.ej2Instances..getRedacts();
if (redacts.length > 0) {
redacts[redacts.length - 1].blurIntensity = 100;
imageEditorObj.value.ej2Instances.updateRedact(redacts[redacts.length - 1]);
}
};
const selRedact = () => {
let redacts = imageEditorObj.value.ej2Instances.getRedacts();
if (redacts.length > 0) {
imageEditorObj.value.ej2Instances.selectRedact(redacts[redacts.length - 1].id);
}
};
const delRedact = () => {
let redacts = imageEditorObj.value.ej2Instances.getRedacts();
if (redacts.length > 0) {
imageEditorObj.value.ej2Instances.deleteRedact(redacts[redacts.length - 1].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" :toolbar="toolbar"></ejs-imageeditor>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="addRedact">Add Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="updateRedact">Update Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="selRedact">Select Redact</ejs-button>
<ejs-button cssClass="e-img-button" :isPrimary="true" v-on:click="delRedact">Delete Redact</ejs-button>
</div>
</template>
<script>
import { ImageEditorComponent, RedactType } 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.drawRedact(RedactType.Blur, dimension?.x, dimension.y, 200, 300);
},
outlineText: function() {
let redacts = this.$refs.imageEditorObj.ej2Instances.getRedacts();
if (redacts.length > 0) {
redacts[redacts.length - 1].blurIntensity = 100;
this.$refs.imageEditorObj.ej2Instances.updateRedact(redacts[redacts.length - 1]);
}
},
selRedact: function() {
let redacts = this.$refs.imageEditorObj.ej2Instances.getRedacts();
if (redacts.length > 0) {
this.$refs.imageEditorObj.ej2Instances.selectRedact(redacts[redacts.length - 1].id);
}
},
delRedact: function() {
let redacts = this.$refs.imageEditorObj.ej2Instances.getRedacts();
if (redacts.length > 0) {
this.$refs.imageEditorObj.ej2Instances.deleteRedact(redacts[redacts.length - 1].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>