Introducing the New React Image Editor
Tags: development, react, webdev, whatsnew
Published: 2023-01-23 13:38:01

---
title: Introducing the New React Image Editor
published: true
date: 2023-01-23 12:17:26 UTC
tags: development, react, webdev, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-react-image-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nypm7wqtjukock86nf67.png
---
In this blog, we’ll introduce the main features of the Syncfusion React Image Editor. We’ll also show you the new features for it from the [Essential Studio 2022 Vol. 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release.

The [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor "React Image Editor Component") is a user interface that allows users to edit images. It provides a range of built-in features for rotating, flipping, zooming, and cropping images with predefined filters. Users can also insert annotations, such as text, freehand drawings, and shapes like rectangles, ellipses, and lines. In addition, the Image Editor supports keyboard interactions and touch gestures and has an optimized user interface for events.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/React-Image-Editor-Component-1.gif" alt="React Image Editor Component" style="width:100%">

  <figcaption>React Image Editor Component</figcaption>

</figure>
## Key features

The following are the key features available in the React Image Editor component:

- [Load and save an image](#load-and-save-an-image).
- [Select and crop an image](#select-and-crop-an-image).
- [Transform an image](#transform-an-image).
- [Add annotations to an image](#add-annotations-to-an-image).
- [Zoom and pan an image](#zooming-and-panning-an-image).
- [Customize the toolbar](#toolbar-customization).
- [Responsive, touch-friendly UI](#adaptive-and-touch-friendly-ui).

### <a name="load-and-save-an-image">Load and save an image</a>

The Image Editor component allows you to open base64, [ImageData](https://www.w3schools.com/tags/canvas_imagedata_data.asp "HTML canvas ImageData data Property"), or hosted and online URL images using the [open](https://ej2.syncfusion.com/react/documentation/api/image-editor#open "open method of React Image Editor") method. The Image Editor supports a variety of file types, including PNG, JPEG, and SVG.

Users can also edit images and save them as **ImageData** using the[getImageData](https://ej2.syncfusion.com/react/documentation/api/image-editor#getimagedata "getImageData method of React Image Editor") method and save images in PNG, JPEG, and SVG formats using the [export](https://ej2.syncfusion.com/react/documentation/api/image-editor#export "export method of React Image Editor") method.

**Note:** To view hosted images, you need to enable the **Directory Browsing** option in **IIS** , which creates a **web.config** file inside the hosted folder. Add the following code in the **web.config** file to resolve the CORS issue.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
  <directoryBrowse enabled="true" />
  <httpProtocol>
   <customHeaders>
     <clear />
     <add name="Access-Control-Allow-Origin" value="*" />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>
```

### <a name="select-and-crop-an-image">Select and crop an image
</a>
The Image Editor component offers a range of selection options including square, circle, and custom shapes, and can handle various aspect ratios (3:2, 4:3, 5:4, 7:5, or 16:9). Users can crop an image by dragging and resizing the selection region. You can initiate the selection process by using the toolbar or the [select](https://ej2.syncfusion.com/react/documentation/api/image-editor#select "select method of React Image Editor") method.

#### Cropping

The React Image Editor allows you to crop any image. You can initiate the cropping process by using the toolbar or the [crop](https://ej2.syncfusion.com/react/documentation/api/image-editor#crop "crop method of React Image Editor") method. This feature enables you to crop images quickly and easily to the desired dimensions.

### <a name="transform-an-image">Transform an image</a>

The React Image Editor offers rotate and flip transformation support, enabling users to alter the orientation of an image. The rotation transformation allows users to rotate an image clockwise or counterclockwise by 90, 180, 270, or 360 degrees. The flip transformation supports horizontal and vertical orientations. You can initiate these transformations by using the toolbar or the [rotate](https://ej2.syncfusion.com/react/documentation/api/image-editor#rotate "rotate method of React Image Editor") and [flip](https://ej2.syncfusion.com/react/documentation/api/image-editor#flip "flip method of React Image Editor") methods.

### <a name="add-annotations-to-an-image">Add annotations to an image</a>

The React Image Editor component enables the addition of a variety of annotations to your images, including text, freehand drawings, and geometric shapes like rectangles, ellipses, and lines.

#### Text annotation

The text annotation allows you to insert text into your images and customize their appearance. Use the toolbar or the [drawText](https://ej2.syncfusion.com/react/documentation/api/image-editor#drawtext "drawText method of React Image Editor") method to add a text annotation and then adjust its color, font family, font size, and font style, including bold and italic options.

#### Shape annotation

The shape annotation allows you to insert geometric shapes, such as rectangles, ellipses, and lines, and customize their appearance by adjusting the stroke color, fill color, and stroke width. These annotations can be added to your images through the toolbar or by using the [drawRectangle](https://ej2.syncfusion.com/react/documentation/api/image-editor#drawrectangle "drawRectangle method of React Image Editor"), [drawEllipse](https://ej2.syncfusion.com/react/documentation/api/image-editor#drawellipse "drawEllipse method of React Image Editor"), and [drawLine](https://ej2.syncfusion.com/react/documentation/api/image-editor#drawline "drawLine method of React Image Editor") methods.

#### Freehand drawing annotation

This annotation allows you to easily insert a freehand drawing and customize its appearance by adjusting the stroke color and stroke width. You can add a freehand drawing annotation to your images using the toolbar or the [freehandDraw](https://ej2.syncfusion.com/react/documentation/api/image-editor#freehanddraw "freehandDraw method of React Image Editor") method.

### <a name="zooming-and-panning-an-image">Zooming and panning an image</a>

The zoom and pan features allow you to adjust the scale and position of an image to focus on specific areas of it. You can use the toolbar to access these features or use the [zoom](https://ej2.syncfusion.com/react/documentation/api/image-editor#zoom "zoom method of React Image Editor") and [pan](https://ej2.syncfusion.com/react/documentation/api/image-editor#pan "pan method of React Image Editor") methods.

### <a name="toolbar-customization">Toolbar customization</a>

The [toolbar](https://ej2.syncfusion.com/react/documentation/api/image-editor#toolbar "toolbar property of React Image Editor") property and the [toolbarUpdating](https://ej2.syncfusion.com/react/documentation/api/image-editor#toolbarupdating "toolbarUpdating event of React Image Editor") event are used to customize the built-in toolbar items and [toolbarTemplate](https://ej2.syncfusion.com/react/documentation/api/image-editor#toolbartemplate "toolbarTemplate property of React Image Editor"). Specify a custom toolbar template as a JSX element to replace the default toolbar with your own custom UI.

### <a name="adaptive-and-touch-friendly-ui">Adaptive and touch-friendly UI</a>

By default, the React Image Editor is designed to be responsive and touch-friendly, so it automatically adapts to different screen sizes and can be used on both mobile devices and desktop computers with finger, pen, or mouse interaction.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Adaptive-and-Touch-Friendly-UI-in-React-Image-Editor.png" alt="Adaptive and Touch-Friendly UI in React Image Editor" style="width:100%">

  <figcaption>Adaptive and Touch-Friendly UI in React Image Editor</figcaption>

</figure>
## New features in 2022 Volume 4

- [Applying filters to an image](#applying-filters)
- [Fine-tune an image](#fine-tune-an-image)

### <a name="applying-filters">Applying filters</a>

The React Image Editor now lets you apply image filters to alter the appearance of an image. Image filters are predefined effects that can be applied to an image to add visual interest or to enhance certain features. The available filters are: cold, warm, chrome, sepia, grayscale, and invert.

#### Applying a filter through the UI

You can apply a filter by selecting the filter icon from the toolbar and then selecting a filter from the list like in the following image.

![Applying a filter through the UI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Applying-a-filter-through-the-UI-2.png)

#### Applying filters through code

Apply a filter programmatically through the [**applyImageFilter**](https://ej2.syncfusion.com/react/documentation/api/image-editor#applyimagefilter "applyImageFilter method of React Image Editor") method. This method accepts a single parameter of type filter as in the following code snippet.

```js
imgObj.applyImageFilter('Warm');
```

### <a name="fine-tune-an-image">Fine-tune an image</a>

The React Image Editor provides support for fine-tuning image filters to alter the appearance of an image. Fine-tuning allows you to adjust the settings of an image filter to achieve a desired effect. The fine-tuning options are brightness, contrast, exposure, hue, saturation, opacity, and blur.

#### Fine-tuning an image using the UI

Fine-tune an image using the toolbar by selecting the fine-tune option from the toolbar. Select an option from the list and adjust the slider to change the appearance of the image, as shown in the following image. ![Fine-tuning an image using the UI](https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Fine-tuning-an-image-using-the-UI-1.png)

#### Fine-tune programmatically

Fine-tuning can be done programmatically using the [finetuneImage](https://ej2.syncfusion.com/react/documentation/api/image-editor#finetuneimage "finetuneImage method of React Image Editor") method. This method accepts two parameters, of type finetune and its value. Refer to the following code example.

```js
imgObj.finetuneImage('Brightness', 200);
```

Here is an example of how you might use the [applyImageFilter](https://ej2.syncfusion.com/react/documentation/api/image-editor#applyimagefilter "applyImageFilter method of React Image Editor") and [finetuneImage](https://ej2.syncfusion.com/react/documentation/api/image-editor#finetuneimage "finetuneImage method of React Image Editor") methods in the React Image Editor.

```js
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import './App.css';
function App() {
  var imgObj;
  function imageEditorCreated() {
    imgObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
  }
  function applyFilter() {
    imgObj.applyImageFilter('Warm');
  }
  function applyFinetune() {
    imgObj.finetuneImage('Brightness', 200);
  }
  return (
    <div className="App">
      <button className="e-btn" onClick={applyFilter}>Filter</button>
      <button className="e-btn" onClick={applyFinetune}>Brightness</button>
      <ImageEditorComponent width='550px' toolbar={[]} height='350px' ref={(img) => { imgObj = img; }} created={imageEditorCreated} />
    </div>
  );
}
export default App;
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/01/Filters-and-Fine-Tuning-Features-in-React-Image-Editor-1.png" alt="Filters and Fine-Tuning Features in React Image Editor" style="width:100%">

  <figcaption>Filters and Fine-Tuning Features in React Image Editor</figcaption>

</figure>
## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and features of our [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor "React Image Editor Component") component. If you would like to give it a try, please download the latest available version of Essential Studio, [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4"). Experience wonderful image editing with this component and provide your valuable feedback in the comments section below.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/?_gl=1*hmo0hl*_ga*MTc0OTQ0NjYwNi4xNjU3ODgyMjE1*_ga_WC4JKKPHH0*MTY2NzE4NjU0OC40MjcuMS4xNjY3MTg3MjE1LjAuMC4w "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Preact vs. React](https://www.syncfusion.com/blogs/post/preact-vs-react.aspx "Blog: Preact vs. React")
- [Recoil: the Future of State Management for React?](https://www.syncfusion.com/blogs/post/recoil-the-future-of-state-management-for-react.aspx "Blog: Recoil: the Future of State Management for React?")
- [React Router vs. React Router DOM](https://www.syncfusion.com/blogs/post/react-router-vs-react-router-dom.aspx "Blog: React Router vs. React Router DOM")
- [Functional Reactive Programming with Node.js Streams](https://www.syncfusion.com/blogs/post/functional-reactive-programming-with-node-js-streams.aspx "Blog: Functional Reactive Programming with Node.js Streams")
- [How to Integrate Syncfusion React Mention Component with Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-mention-component-with-rich-text-editor.aspx "Blog: How to Integrate Syncfusion React Mention Component with Rich Text Editor")
- [7 VS Code Extensions for React Developers](https://www.syncfusion.com/blogs/post/7-vs-code-extensions-for-react-developers.aspx "Blog: 7 VS Code Extensions for React Developers")