Finetune in Image Editor component

25 Mar 202517 minutes to read

Fine-tuning involves making precise adjustments to the settings of an image filter in order to achieve a specific desired effect. It provides control over the intensity and specific aspects of the filter’s impact on the image. For example, fine-tuning allows you to modify parameters like brightness, saturation, or other relevant properties to fine-tune the level or quality of the filter’s effect. This level of control enables you to achieve the exact look or outcome you want for your image.

Adjust the brightness, contrast, and saturation

The finetuneImage method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is ImageFinetuneOption which determines the type of fine-tuning to be applied (brightness, contrast, and saturation), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of brightness, contrast, and saturation by specifying the desired type and corresponding value.

The finetuneImage method is used to perform brightness, contrast, and saturation fine-tuning by specifying this type as a first parameter and specifying the fine-tuning value as the second parameter of the method.

Here is an example of brightness, contrast, and saturation fine-tuning using the finetuneImage method.

app.jsx
app.tsx
index.html
import { ImageEditorComponent, ImageFinetuneOption } 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');
        }
    }
    brightnessClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Brightness, 10);
    }
    contrastClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Contrast, 30);
    }
    saturationClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Saturation, 100);
    }

    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='Brightness' onClick={this.brightnessClick.bind(this)} />
                <ButtonComponent cssClass='e-primary' content='Contrast' onClick={this.contrastClick.bind(this)} />
                <ButtonComponent cssClass='e-primary' content='Saturation' onClick={this.saturationClick.bind(this)} />
            </div>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ImageFinetuneOption } 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 brightnessClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Brightness, 10);
    }
    function contrastClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Contrast, 30);
    }
    function saturationClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Saturation, 100);
    }

    return (
        <div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar={[]}></ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Brightness' onClick={brightnessClick} />
                <ButtonComponent cssClass='e-primary' content='Contrast' onClick={contrastClick} />
                <ButtonComponent cssClass='e-primary' content='Saturation' onClick={saturationClick} />
            </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>

Adjust the hue, exposure, blur, and opacity

The finetuneImage method is designed to facilitate fine-tuning operations on an image. It accepts two parameters: the first parameter is ImageFinetuneOption which determines the type of fine-tuning to be applied (hue, exposure, blur, and opacity), and the second parameter represents the fine-tuning value, indicating the degree or intensity of the adjustment. This method allows for convenient adjustment of hue, exposure, blur, and opacity by specifying the desired type and corresponding value.

Here is an example of hue, exposure, blur, and opacity fine-tuning using the finetuneImage method.

app.jsx
app.tsx
index.html
import { ImageEditorComponent, ImageFinetuneOption } 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');
        }
    }
    blurClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Blur, 20);
    }
    exposureClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Exposure, 20);
    }
    hueClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Hue, 20);
    }
    opacityClick() {
        this.imgObj.finetuneImage(ImageFinetuneOption.Opacity, 70);
    }
    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='Blur' onClick={this.blurClick.bind(this)} />
                <ButtonComponent cssClass='e-primary' content='Exposure' onClick={this.exposureClick.bind(this)} />
                <ButtonComponent cssClass='e-primary' content='Hue' onClick={this.hueClick.bind(this)} />
                <ButtonComponent cssClass='e-primary' content='Opacity' onClick={this.opacityClick.bind(this)} />
            </div>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('image-editor'));
import { ImageEditorComponent, ImageFinetuneOption } 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 blurClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Blur, 20);
    }
    function exposureClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Exposure, 20);
    }
    function hueClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Hue, 20);
    }
    function opacityClick(): void {
        imgObj.finetuneImage(ImageFinetuneOption.Opacity, 70);
    }

    return (
        <div className='e-img-editor-sample'>
            <ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated} toolbar={[]}></ImageEditorComponent>
            <div>
                <ButtonComponent cssClass='e-primary' content='Blur' onClick={blurClick} />
                <ButtonComponent cssClass='e-primary' content='Exposure' onClick={exposureClick} />
                <ButtonComponent cssClass='e-primary' content='Hue' onClick={hueClick} />
                <ButtonComponent cssClass='e-primary' content='Opacity' onClick={opacityClick} />
            </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>

Finetune value changing event

The finetuneValueChanging event is triggered when performing fine-tuning on the image. This event is passed an object that contains information about the fine-tuning event, such as the type of fine-tuning and the value of fine-tuning performed.

The parameter available in the FinetuneEventArgs event is,

FinetuneEventArgs.finetune - The type of fine-tuning as ImageFinetuneOption to be applied in the image editor.

FinetuneEventArgs.value - The fine-tuning value to be applied in the image editor.

FinetuneEventArgs.cancel – Specifies a boolean value to cancel the fine-tuning action.