This sample demonstrates Image Editor features such as crop, rotate, flip, insert annotations such as rectangle, ellipse, line, arrow, path, and text.
The Image Editor component provides built-in support to edit images in the following ways through APIs: Selection : Multiple selection options are available. The selection region can be a square or circle, customized to various aspects ratios, and customized by dragging and resizing. Crop : The image can be cropped based on the selection. Rotate : The image can be rotated both clockwise and anticlockwise by 90 degrees. Flip : The image can be flipped both horizontally and vertically. Zoom : The image can be zoomed in and out. Pan : View the entire image by toggling the pan option from the toolbar. Freehand drawing : Draw freehand on the image and adjust the pen's stroke width and stroke color. Reset : Revert all the edited states and load the original image. Save : Save the edited image in JPEG, PNG, and SVG formats. Annotation : Text, rectangle, ellipse, arrow, path, image, and line annotation shapes are supported. Finetunes : The effects such as brightness, contrast, hue, sauration, and blur can be applied to the image. Filters : The predefined filters such as chrome, cold, warm, grayscale, sepia, and invert can be applied to the image. Frames : The predefined frames such as mat, bevel, line, hook, and inset can be applied to the image. Resize : The image can be resized to cater to the user's preferences and needs, enhancing the adaptability and usability of the content. Z-Order : Adjust the positioning of annotations to manage the layering of elements, essential for creating polished designs. Redact : Redacting sensitive information in images involves covering or obscuring specific areas to make the information unreadable or unidentifiable. More information about Image Editor can be found in this documentation section.