ImageEditor

ImageEditor Overview

The ImageEditor component enables users to edit images directly in the application. It provides a canvas for previewing the image, a toolbar for general actions such as upload, undo, redo, download, and zoom, and a sidebar with editing tools for resizing, cropping, rotating, adding text, shapes, and lines, blurring, pixelating, adjusting, filtering, framing, and applying shadows.

Live Demo

Appearance

The Telerik and Kendo UI ImageEditor is a composite component that consists of other smaller components such as the ToolBar, Button, and form components.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ImageEditor can acquire the following states:

• An ImageEditor in its normal state is ready for editing.
• Empty—If no image is loaded, the canvas displays a placeholder that prompts users to upload one. The buttons in the toolbar and the sidebar are disabled until an image is available.
• Exporting—While an image is being exported, a busy overlay with a loader covers the component and blocks any interaction.

Anatomy

The anatomy of the ImageEditor summarizes the elements of the component:

• Header—Contains the toolbar with the general actions such as upload, undo, redo, download, and zoom.
• Sidebar—Contains the buttons for the available editing tools.
• Action pane—Displays the options of the currently selected tool. The pane is available only while a tool is active.
• Canvas—Displays the image and the active editing overlays such as crop, resize, and rotate handles. When no image is loaded, the canvas shows a placeholder with an upload action.

Layouts

The ImageEditor supports the following layouts:

• Default—The sidebar and the action pane are docked on the side of the canvas.
• Adaptive—Renders the mobile layout in which the canvas is followed by the action pane and the sidebar, both docked at the bottom of the component. This layout is applied through the k-imageeditor-adaptive class.

When the number of tools exceeds the available space, the sidebar can become scrollable.

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for jQuery ImageEditorFind more information about the Kendo UI for jQuery ImageEditor in the official product documentation of the component.