Filters in the React Image Editor component

25 Mar 202511 minutes to read

Filters are pre-defined effects that can be applied to an image to alter its appearance or mood. Image filters can be used to add visual interest or to enhance certain features of the image. Some common types of image filters include cold, warm, chrome, sepia, and invert. This can be done by either using the toolbar or the applyImageFilter method which takes a single parameter: the filter applied to an image.

Apply filter effect

The applyImageFilter method is utilized to apply filters to an image. By passing the desired filter type as the first parameter of the method, specified as ImageFilterOption the method applies the corresponding filter to the image. This allows for easy and convenient application of various filters to enhance or modify the image based on the chosen filter type.

  • filterOption - Specifies the filter options to the image.

In the following example, you can using the applyImageFilter method in the button click event.

import { ImageEditorComponent, ImageFilterOption } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component {
    imgObj;
    imageEditorCreated() {
        if (Browser.isDevice) {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        }
        else {
            this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    chromeClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Chrome);
    }
    coldClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Cold);
    }
    warmClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Warm);
    }
    grayScaleClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Grayscale);
    }
    sepiaClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Sepia);
    }
    invertClick() {
        this.imgObj.applyImageFilter(ImageFilterOption.Invert);
    }
    render() {
        return (<div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)} toolbar = {[]}>
            </ImageEditorComponent>
                    <div>
                        <ButtonComponent cssClass='e-primary' content='Chrome' onClick={this.chromeClick.bind(this)}/>
                        <ButtonComponent cssClass='e-primary' content='Cold' onClick={this.coldClick.bind(this)}/>
                        <ButtonComponent cssClass='e-primary' content='Warm' onClick={this.warmClick.bind(this)}/>
                        <ButtonComponent cssClass='e-primary' content='GrayScale' onClick={this.grayScaleClick.bind(this)}/>
                        <ButtonComponent cssClass='e-primary' content='Sepia' onClick={this.sepiaClick.bind(this)}/>
                        <ButtonComponent cssClass='e-primary' content='Invert' onClick={this.invertClick.bind(this)}/>
                    </div>
                </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ImageFilterOption } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let imgObj: ImageEditorComponent;
    function imageEditorCreated(): void {
        if (Browser.isDevice) {
            imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
        } else {
            imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
        }
    }
    function chromeClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Chrome);
    }
    function coldClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Cold);
    }
    function warmClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Warm);
    }
    function grayScaleClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Grayscale);
    }
    function sepiaClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Sepia);
    }
    function invertClick(): void {
        imgObj.applyImageFilter(ImageFilterOption.Invert);
    }

    return (
        <div className='e-img-editor-sample'>
        <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar = {[]}>
        </ImageEditorComponent>
                <div>
                    <ButtonComponent cssClass='e-primary' content='Chrome' onClick = {chromeClick}/>
                    <ButtonComponent cssClass='e-primary' content='Cold' onClick = {coldClick}/>
                    <ButtonComponent cssClass='e-primary' content='Warm' onClick = {warmClick}/>
                    <ButtonComponent cssClass='e-primary' content='Grayscale' onClick = {grayScaleClick}/>
                    <ButtonComponent cssClass='e-primary' content='Sepia' onClick = {sepiaClick}/>
                    <ButtonComponent cssClass='e-primary' content='Invert' onClick = {invertClick}/>
                </div>
            </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Image Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-image-editor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css"rel="stylesheet">
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='image-editor'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Image filtering event

The imageFiltering event is triggered when applying filtering on the image. This event is passed an object that contains information about the filtering event, such as the type of filtering.

The parameter available in the ImageFilterEventArgs event is,

ImageFilterEventArgs.filter - The type of filtering as ImageFilterOption to be applied in the image editor.

ImageFilterEventArgs.cancel – Specifies to cancel the filtering action.