Blazor Image Editor Component - Syncfusion

Syncfusion Blazor Image Editor component

The Blazor Image Editor is a UI component for editing and enhancing images. With built-in support for cropping, rotating, flipping, zooming, and applying filters, this component makes it easy to fine-tune your edits to achieve the desired results. Additionally, the Blazor Image Editor allows users to annotate images with shapes such as rectangles, ellipses, lines, and text, as well as freehand drawings.

Syncfusion Blazor Image Editor component showcase

Features and Benefits

Selection and cropping

The Blazor Image Editor makes it easy to get a perfect crop every time using multiple selection options, including square, circle, and customizable aspect ratios. Easily drag and resize the selection region to precisely crop the desired area of the image.

Custom selection

Allows users to draw a custom selection rectangle on an image that can be repositioned by dragging and resizing it to get the desired selection.

Square selection

Crop images into perfect square regions or maintain the aspect ratios of the images.

Circle selection

Crop images into perfect circular regions.

Predefined aspect ratios

Customize selection regions for cropping your images according to predefined aspect ratios, including 4:3, 7:5, 16:9, and more.

Transform images

The Image Editor has built-in support for transforming images in various ways, including rotating, flipping, and zooming.

Rotate an image

Users can rotate images with annotations clockwise or counterclockwise.

Flip an image

Flip images with annotations horizontally or vertically useful for creating a mirror image of the original image.

Annotations

The Image Editor has multiple annotation tools, including text, freehand drawings, and shapes like rectangles, ellipses, lines, arrows, and paths.

Text annotation

Users can add a text to an image using the text annotation tool, which allows them to add captions, labels, or other types of text-based information. 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.

Freehand drawing annotation

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, the freehand drawing annotation can be used in combination with other annotation tools, such as text and shapes, to create rich, annotated images.

Shapes annotation

Add shapes, such as rectangles, ellipses, lines, arrows, and path, to an image. With the shape annotation tool, customize the border color, fill color, and border width of the shapes.

Undo and redo

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.

Zoom in/out images

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

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

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.

Keyboard zoom

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.

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.

Opening and Saving images

Easily load an image into the Blazor image editor using a base 64 string or URL, with support for PNG, JPEG, and SVG image formats. Save the image as a base 64 string, or choose from PNG, JPEG, or SVG formats.

Web framework integration

Blazor Image Editor component is also available in ASP.NET Core, ASP.NET MVC, JavaScript, React, Angular, and Vue frameworks. Check out the different Image Editor platforms from the links below,

Learn More about Blazor Image Editor

About Syncfusion Blazor Components

The Syncfusion's Blazor components library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package. In addition to Image Editor, we provide popular Blazor Components such as DataGrid, Scheduler, Diagram, Word Processor, and more.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI, UWP, Flutter, and .NET MAUI). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | Toll Free: 1-888-9 DOTNET