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>