# Blazor ImageEditor Tools

The [ImageEditor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview) UI consists of a toolbar, a sidebar with the editing tools, a tool pane with the options of the selected tool, and a canvas. This article describes the built-in tools and the options that each tool provides.

Every tool action is part of the undo history and fires the [`OnExecute` event](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexecute). The application can also run each tool action from code with the [ImageEditor commands](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands).

> caption In this article:

* [Toolbar](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#toolbar)
* [Sidebar tools](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#sidebar-tools)
* [Objects](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#objects)
* [Undo and redo](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#undo-and-redo)
* [Adaptive rendering](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/tools#adaptive-rendering)

## Toolbar

The toolbar sits above the canvas and provides the following tools:

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Tool     | Description                                                                                                                                                                                                                 |
| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Open     | Opens a file dialog, so that the user can [load another image](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/loading-images#let-users-open-a-file).                                                |
| Undo     | Reverts the last edit.                                                                                                                                                                                                      |
| Redo     | Reapplies the last reverted edit.                                                                                                                                                                                           |
| Zoom     | Sets the canvas zoom level to Fit, Fill, 25%, 50%, 100%, or 200%. Zoom and pan change the view only and do not fire [`OnExecute`](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexecute). |
| Download | Opens the [Export Image dialog](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export#export-dialog).                                                                                               |

## Sidebar Tools

The sidebar lists the editing tools. Selecting a tool opens its pane with the related options.

### Adjustments

Changes the image tone with a live preview while the user drags a slider. The available adjustments are Brightness, Exposure, Contrast, Saturation, Hue, Blur, and Opacity.

### Blur

Hides sensitive parts of the image. The pane provides:

* Blur or pixelate mode.
* Rectangular or elliptical area.
* Adjustable intensity.

### Crop

Removes the areas outside the crop rectangle. The pane provides:

* Free crop with handles on the canvas.
* Aspect ratio presets—Original, 1:1, 3:2, 4:3, 5:4, 7:5, 16:9, and Custom.
* Landscape or portrait orientation.
* Explicit crop width and height.

### Filters

Applies a preset color treatment. Each filter displays a thumbnail preview of the current image. The available filters are None, Black and White, Grayscale, Sepia, Warm, Cold, Chrome, and Invert.

### Frame

Draws a frame around the image. The pane provides a None, Single, or Multiple frame type, together with thickness, offset, roundness, stroke type, and color.

### Resize

Changes the pixel dimensions of the image. The pane provides:

* Width and height in pixels or percentage.
* A lock that preserves the aspect ratio.
* Resize handles on the canvas.

### Rotate

Changes the image orientation. The pane provides:

* Rotation by 90 degrees to the left and to the right.
* Straightening between -45 and 45 degrees.
* Horizontal and vertical flip.

### Shadow

Draws a shadow around the image. The pane provides position, blur, spread, color, and opacity.

### Shapes

Adds a shape to the canvas. The available shapes are Square, Rectangle, Circle, Oval, Triangle, Star, Heart, Diamond, Hexagon, Pentagon, Arrow, and Line. The pane provides:

* End points for lines—None, Arrow, Circle, and Diamond.
* Stroke type—Solid, Dashed, and Dotted.
* Stroke color, stroke width, fill color, and opacity.

### Text

Adds text boxes that the user can edit directly on the canvas. The pane provides font family, font size, bold, italic, underline, strikethrough, all caps, alignment, color, and opacity.

## Objects

Text boxes, shapes, and blur areas are objects on the canvas. Users can:

* Select an object with a click.
* Move an object by dragging it or by pressing the arrow keys.
* Resize an object with its handles.
* Duplicate, flip, align, and reorder shapes and text boxes.
* Delete an object with the `Delete` key. The component requests confirmation before it deletes the object.

Each object has an `Id`. Use the `Id` to [update, move, align, reorder, or delete an object programmatically](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands#object-commands).

## Undo and Redo

The ImageEditor maintains a full history of the edits. Users can revert and reapply any edit from the toolbar or with the `Ctrl` + `Z` and `Ctrl` + `Y` [keyboard shortcuts](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/keyboard-navigation).

A slider drag or a canvas gesture produces a single history entry, so one undo reverts the complete interaction instead of each intermediate value.

Undo and redo fire the [`OnExecute` event](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events#onexecute) with a `Reason` of `Undo` or `Redo`.

## Adaptive Rendering

Set the `AdaptiveMode` parameter to `AdaptiveMode.Auto` to enable the mobile layout. On small screens the tool pane and the sidebar display horizontally at the bottom of the component below the editing canvas. The default parameter value is `AdaptiveMode.None`. Read more about [adaptive rendering in Telerik UI for Blazor](https://www.telerik.com/blazor-ui/documentation/common-features/adaptive-rendering).

> caption Enable adaptive rendering in the ImageEditor

```RAZOR.skip-repl
<TelerikImageEditor ImageUrl="images/sample-photo.jpg"
                    AdaptiveMode="@AdaptiveMode.Auto"
                    Width="100%"
                    Height="600px" />
```

## Next Steps

* [Edit images programmatically](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/commands)
* [Export the edited image](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/export)
* [Handle the ImageEditor events](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/events)

## See Also

* [Live Demo: ImageEditor](https://demos.telerik.com/blazor-ui/imageeditor/overview)
* [ImageEditor API Reference](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.telerikimageeditor)