Trusted by the world’s leading companies
Overview
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.
Blazor Image Editor Code Example
Easily get started with the Blazor Image Editor using a few simple lines of C# code as demonstrated below. Also, explore our Blazor Image Editor Example, which shows you how to render and configure the Blazor Image Editor.
@using Syncfusion.Blazor.ImageEditor
<SfImageEditor @ref="ImageEditor" Height="400"></SfImageEditor>
@code {
SfImageEditor ImageEditor;
}AI-assisted development
Build feature-rich Blazor Image Editor experiences faster
Accelerate image editing application development with Syncfusion AI tools that turn requirements into fully configured editing experiences with minimal manual setup.
Agentic UI Builder
Turn prompts into ready-to-use UI screens, layouts, and workflows with Syncfusion Blazor components.
Example Prompt Create an image editing workspace with annotations, cropping, and filters.
Agent Skills
Accelerate development with Syncfusion AI Agent Skills for faster implementation and integration.
Example Prompt Generate a Blazor image editor with annotation support, filters, and export options.
AI Coding Assistant
Accelerate development with AI that generates, configures, and troubleshoots component code directly in your IDE.
Example Prompt Show how to apply filters and export images in Syncfusion Blazor Image Editor.
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.
Annotations
The Image Editor has multiple annotation tools, including text, freehand drawings, images, and shapes like rectangles, ellipses, and lines.
Text annotation
With the text annotation tool, users can add captions, labels, or other types of text-based information. Text annotations can be inserted anywhere on the image and customized by changing their color, outline color, fill color, outline width, 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, and lines, to an image. With the shape annotation tool, customize the border color, fill color, and border width of the shapes.
Image annotation
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 an image.
Path annotation
This feature enables manipulation of paths, which are editable curves consisting of anchor points connected by control handles that allow precise control over object boundaries. Users can create and modify custom shapes within an image using paths.
Arrow annotation
This feature provides the ability to draw and customize arrows with precision. Arrows can be created, modified, and personalized according to user preferences. They highlight objects or draw attention to specific details, effectively communicating the intended focal point.
Z-order support
This feature allows users to adjust the positioning of annotations, particularly for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product.
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.
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.
Loading an image initially
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.
Image Editor toolbar
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.
Exporting and saving images
Easily save an image with a specified file name, file format, and image quality. Supported file formats for saving an image include PNG, JPEG, and SVG types. This feature provides more control over the output, ensuring that users can save their work exactly as they need it.
Quick access toolbar
This feature enhances the Image Editor control by showing a toolbar when you select annotations like rectangle, ellipse, line, arrow, text, and freehand draw. It offers quick access to actions such as clone, delete, and edit text.
Frame support
Users can add decorative borders or frames around images to enhance the visual appeal of an image.
Resize support
Users can adjust the size and dimensions of an image to suit their needs, such as for printing, web display, or other purposes.
Straightening support
Users can adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation.
Redact support
Users can conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information.
Localization
Localize user interface strings of the Blazor Image Editor component using the localization (l10n) library.
Touch-friendly editing
For a seamless experience on all devices, the Blazor Image Editor includes a responsive mode that adapts the UI for mobile devices and offers a great user experience on phones, tablets, and desktops.
Developer-friendly APIs
With its extensive set of APIs, developers can control the appearance and behaviors of the Image Editor to suit their needs.
Built-in themes
The Blazor 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.
145+ UI components
1200+ interactive Blazor demos
8.3M+ downloads
Other supported frameworks
The Image Editor is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Blazor Image Editor works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
Not sure how to create your first Blazor Image Editor? Our tutorial videos and documentation can help.
I’d love to watch it now I’d love to read it nowBlazor Components – 145+ UI and DataViz Components
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
FILE VIEWERS & EDITORS
DROPDOWNS
NAVIGATION
INPUTS
BUTTONS
INTERACTIVE CHAT
Build Document Workflows in Blazor
Integrate a powerful PDF Viewer, rich DOCX Editor, and full‑featured Spreadsheet Editor into your Blazor applications, alongside robust document processing libraries, to create smooth document experiences. Empower users to work with documents interactively while developers automate processing behind the scenes.
Frequently Asked Questions
Why should you choose Syncfusion Blazor Image Editor?
The Syncfusion Blazor Image Editor component supports the following features:
- Convert images to base64 and download images in JPEG, PNG, and SVG formats.
- Flexible and completely customizable user interface.
- One of the best Blazor Image Editors in the market that offers a feature-rich UI to interact with the software.
Simple configuration and APIs.
- Supports all modern browsers.
- Mobile-touch friendly and responsive.
Extensive demos, documentation and videos to learn quickly and get started with Blazor Image Editor.
Where can I find the Syncfusion Blazor Image Editor demo?
You can find our Blazor Image Editor demo, which demonstrates how to render and configure the Image Editor.
Can I download and utilize the Syncfusion Blazor Image Editor for free?
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 US $1 million in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
How do I get started with Syncfusion Blazor Image Editor?
A good place to start would be our comprehensive getting started documentation.
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
Blazor components
The speed how they adding new Blazor controls and update theirs functionality.
I am using Blazor components. Searching for Blazor components I found that Syncfusion very fast adopted theirs controls for new development platform. Tech support is fast and excellent. The best of best is that they provide free controls for small business.
Igor L,
CEO, Small-Business
Syncfusion objects with a Blazor
I have used some of the Syncfusion objects with a Blazor application. The support group has always been very helpful.
Kris B,
Software Development Consultant, Small-Business
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion Blazor Image Editor Resources
UI Kits
Figma Download
Figma Download
Awards
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.
Recent activities in Blazor Image Editor tutorials and blogs
The Blazor Image Editor tutorial videos and blog posts will guide you in building your first app with this Blazor components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Image Editor updates.
