Blazor Image Editor Example - Default Functionalities
Drag and drop your image here or
Browse here...
Drop your image here or
Browse here...Supports: PNG, SVG, JPG, WebP, and BMP
Or drop files here
This sample demonstrates the default rendering of the Blazor Image Editor with minimal configuration. It highlights the built-in editing workflow, toolbar actions, and output formats available out of the box.
The Image Editor provides rich, client-side APIs to modify images interactively or programmatically. You can perform region-based operations, annotate content, fine-tune appearance, and export results in multiple formats. Keyboard and mouse interactions are optimized for precise editing, and the component is responsive across devices.
- Selection – Square/circle regions with adjustable aspect ratios; resize and drag for precise selection.
- Crop – Crop the image to the current selection.
- Rotate – Rotate clockwise or counterclockwise in 90° steps.
- Flip – Flip horizontally or vertically.
- Zoom and
Pan– Inspect details and navigate the canvas efficiently. Freehand drawing– Draw on the image; control stroke width and color.Annotation– Add text, rectangle, ellipse, arrow, path, image, and line shapes; manageZ-orderfor layered designs.- Finetunes – Adjust brightness, contrast, hue, saturation, and blur.
- Filters – Apply presets such as chrome, cold, warm, grayscale, sepia, and invert.
- Frames – Add predefined frames like mat, bevel, line, hook, and inset.
- Resize – Scale images to fit specific dimensions or constraints.
- Redact – Obscure sensitive regions for privacy and compliance.
- Reset – Revert edits to the original image state.
Save– Export as JPEG, PNG, or SVG.