Redact in the ASP.NET CORE Image Editor control

13 Sep 20247 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.

@{
    var imageTool = new string[] { };
}

<div class="col-lg-12 control-section e-img-editor-sample">
    <ejs-imageeditor id="image-editor" created="created" toolbar="@imageTool"></ejs-imageeditor>
</div>
<ejs-button id="add-redact" onclick="addRedact()" cssClass="e-primary" content="Add Redact"></ejs-button>
<ejs-button id="update-redact" onclick="updateRedact()" cssClass="e-primary" content="Update Redact"></ejs-button>
<ejs-button id="select-redact" onclick="selectRedact()" cssClass="e-primary" content="Select Redact"></ejs-button>
<ejs-button id="delete-redact" onclick="deleteRedact()" cssClass="e-primary" content="Delete Redact"></ejs-button>

<script>
    function created() {
        var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        if (ej.base.Browser.isDevice) {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
        } else {
            imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
        }
    }
    
    function addRedact() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        let dimension = imgObj.getImageDimension();
        imgObj.drawRedact(RedactType.Blur, dimension.x + 100, dimension.y + 100, 200, 300);
    }
    function updateRedact() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        let redacts = imgObj.getRedacts();
        if (redacts.length > 0) {
          redacts[redacts.length - 1].blurIntensity = 100;
          imgObj.updateRedact(redacts[redacts.length - 1]);
        }
    }
    function selectRedact() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        let redacts = imgObj.getRedacts();
        if (redacts.length > 0) {
            imgObj.selectRedact(redacts[redacts.length - 1].id);
        }
    }
    function deleteRedact() {
        var imgObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
        let redacts = imgObj.getRedacts();
        if (redacts.length > 0) {
            imgObj.deleteRedact(redacts[redacts.length - 1].id);
        }
    }

</script>

<style>
    .image-editor {
        margin: 0 auto;
    }

    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }

    @@media only screen and (max-width: 700px) {
        .e-img-editor-sample {
            height: 75vh;
            width: 100%;
        }
    }

    .control-wrapper {
        height: 100%;
    }
</style>
public ActionResult Default()
{
    return View();
}

Output be like the below.

ImageEditor Sample