We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The ASP.NET MVC Image Editor is a UI control for editing and enhancing images. With built-in support users crop, rotate, flip, zoom, and apply filters. Additionally, users can annotate images with shapes such as rectangles, ellipses, lines, and text, as well as freehand drawings.
The ASP.NET MVC Image Editor makes it easy to get a perfect crop every time using multiple selection options, including square, circle, and customizable aspect ratios. The selection region can be dragged and resized for cropping an image.
Draw a custom selection rectangle on an image which can be repositioned by dragging and resizing it to get the desired selection.
Crop images into perfect square regions or maintain their aspect ratios.
Crop images into perfect circular regions.
Customize selection regions for cropping images according to predefined aspect ratios, including 4:3, 7:5, 16:9, and more.
The Image Editor has multiple annotation tools, including text, freehand drawings, images, and shapes like rectangles, ellipses, and lines.
Users can add text (captions, labels, or other types of text-based information) to an image using the text annotation tool. The text annotation can be inserted anywhere on the image and customized by changing its color, font family, font size, and font styles such as bold and italic.
Add hand-drawn content to an image using a mouse or touch. With the freehand drawing annotation, users can customize the pen color and stroke width to suit their needs. Also, it can be combined with other annotation tools, such as text and shapes, to create rich, annotated images.
Add shapes, such as rectangles, ellipses, and lines, to an image. With the shape annotation tool, customize the border color, fill color, and border width of the shapes.
This feature allows users to insert and display multiple images in addition to the main image they are editing. These image annotations can be used for different purposes, such as adding logos, watermarks, or decorative elements to the image.
The Image Editor has built-in support to transform images by rotating, flipping, and zooming.
Users can rotate images with annotations clockwise or counterclockwise.
Flip images with annotations horizontally or vertically for creating a mirror image of the original image.
The Image Editor provides an option to undo and redo changes made to an image. The undo option helps reverse the last action performed and the redo option reverses the last undo action performed with the Image Editor.
Users can adjust the size of an image by zooming in or out to fine-tune their edits. The pan tool can also be used to reveal hidden areas of an image.
Pinch zoom is a technique for zooming in and out an image by using your fingers. On touch-enabled devices, you can use two fingers to pinch and zoom in or out.
Mouse wheel zoom is a method of zooming in and out an image using your mouse. To zoom in, press the ctrl key and roll your mouse wheel forward, and to zoom out, roll your mouse wheel backward.
To zoom in, hold down the Ctrl key and press the + button and to zoom out, hold down Ctrl and press the - button. This will adjust the size of the image on your screen making it either larger or smaller depending on your needs.
Easily load an image into the ASP.NET MVC Image Editor using a base 64 string or URL, with support for PNG, JPEG, and SVG image formats.
Offers a wide range of tools for annotating, selecting, cropping, zooming, panning, rotating, flipping, filtering, and more, enabling users to fully edit and manipulate their images. Additionally, users can customize the toolbar by defining their own items or the entire toolbar.
Save the image as a base 64 string, or choose from PNG, JPEG, or SVG formats.
This feature enhances the Image Editor component by showing a toolbar when you select annotations like rectangle, ellipse, line, arrow, text, and freehand draw. It offers quick-access options such as clone, delete, and edit text.
This feature enables manipulation of paths. Users can create, modify, and manipulate custom shapes within an image using paths. Paths are editable curves consisting of anchor points connected by control handles, allowing precise control over object boundaries.
This feature provides the ability to draw and customize arrows with precision. Arrows can be created, modified, and personalized according to user preferences. By highlighting objects or drawing attention to specific details, arrows effectively communicate the intended focal point.
Allows users to add decorative borders or frames around images. Frames can enhance the visual appeal of an image.
Users can adjust the size and dimensions of an image to suit their needs, such as printing, web display, or other purposes, even if the description is lengthy.
Localize user interface strings of the ASP.NET MVC Image Editor control using the localization (l10n) library.
For a seamless experience on all devices, the ASP.NET MVC Image Editor includes a responsive mode that adapts the UI for mobile devices and offers a great user experience on phones, tablets, and desktops.
With its extensive set of APIs, developers can control the appearance and behaviors of the Image Editor to suit their needs.
The ASP.NET MVC Image Editor features built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these themes or create their own using SASS variables or the Theme Studio application to achieve the desired look and feel.
In addition to ASP.NET MVC, the Image Editor component is also available for the Angular, React, Vue, and JavaScript frameworks. You can access the component on these platforms using the links below.
Easily get started with the ASP.NET MVC Image Editor using a few simple lines of CSHTML and C# code example as demonstrated below. Also explore our ASP.NET MVC Image Editor Example that shows you how to render and configure the Image Editor in ASP.NET MVC.
@section ControlsSection{
<div class="col-lg-12 control-section e-img-editor-sample">
@Html.EJS().ImageEditor("image-editor").Created("created").Render()
</div>
<script>
function created() {
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
if (ej.base.Browser.isDevice) {
imageEditorObj.open('../Content/ImageEditor/images/flower.png');
} else {
imageEditorObj.open('../Content/ImageEditor/images/bridge.png');
}
imageEditorObj.theme = window.location.href.split('#/')[1];
}
</script>
}using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.ImageEditor;
namespace EJ2MVCSampleBrowser.Controllers.ImageEditor
{
public partial class ImageEditorController : Controller
{
public ActionResult DefaultFunctionalities()
{
return View();
}
}
}You can find our ASP.NET MVC Image Editor demo, which demonstrates how to render and configure the Image Editor.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
