syncfusion-react-image-editor

What this skill does

# Implementing Syncfusion React Image Editor

The Syncfusion React Image Editor is a comprehensive, feature-rich component for editing images directly in your React applications. It provides an intuitive interface with powerful tools for transformations, annotations, effects, and more.

## Component Overview

The Image Editor combines a canvas-based editing environment with a comprehensive toolbar and contextual tools. It supports:

- **Multiple Input Sources:** Files, URLs, base64, blobs, file managers, treeviews
- **Rich Annotation Support:** Text (with styling), shapes, freehand drawings, watermarks
- **Professional Effects:** Filters and fine-tuning controls
- **Advanced Operations:** Z-order management, redaction, frame decoration
- **Accessibility First:** Full keyboard navigation, WCAG compliance, RTL support, 120+ localization keys
- **Flexible Integration:** Standalone or within dialogs, with customizable toolbars

## Documentation and Navigation Guide

### 🔹 API Reference
📄 **Read:** [references/api.md](references/api.md)
- Complete API documentation with all properties, methods, and events
- Properties overview (core, toolbar, settings)
- Methods for image operations, transformations, annotations
- Events for lifecycle, interactions, effects, and toolbars
- Enums and type definitions (ArrowheadType, FrameType, RedactType, etc.)
- Complete working examples with verified method signatures

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation with Vite and create-react-app
- CSS imports and theme setup
- Basic component initialization
- Setting width, height, and initial rendering

### Opening and Saving Images
📄 **Read:** [references/opening-saving-images.md](references/opening-saving-images.md)
- Open from file paths, URLs, base64 strings, blobs
- Open from file uploader, file manager, and treeview
- Save/export as PNG, JPEG, SVG, WEBP
- Image dimensions and aspect ratio control
- File opened, saving, and lifecycle events

### Selection and Cropping
📄 **Read:** [references/selection-cropping.md](references/selection-cropping.md)
- Insert custom, square, and circle selections
- Crop with aspect ratios (2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, 16:9)
- Crop method and selection events
- Maintain original image size during cropping
- Lock selection area during resizing

### Transform: Rotate, Flip, and Straighten
📄 **Read:** [references/transform-rotate-flip.md](references/transform-rotate-flip.md)
- Rotate clockwise/counter-clockwise by degrees
- Flip horizontally and vertically
- Straighten images with fine degree adjustments (-45° to +45°)
- Transform annotations along with image
- Rotating and flipping events

### Zoom and Pan Operations
📄 **Read:** [references/zooming-panning.md](references/zooming-panning.md)
- Zoom in/out with configurable min/max factors
- Pan when zoomed or during cropping
- Zoom triggers (toolbar, pinch, mouse wheel, keyboard)
- Zooming and panning events
- Zoom point calculations

### Text Annotations
📄 **Read:** [references/text-annotations.md](references/text-annotations.md)
- Add text with position, content, and font settings
- Text styling (bold, italic, underline, strikethrough)
- Font families, sizes, and colors
- Multiline text with newline characters
- Delete text annotations
- Customize font color via shapeChanging event

### Freehand Drawing
📄 **Read:** [references/freehand-drawing.md](references/freehand-drawing.md)
- Enable/disable freehand drawing mode
- Customize stroke width and color
- Delete freehand annotations
- Adjust stroke during drawing via shapeChanging event

### Shape Annotations
📄 **Read:** [references/shape-annotations.md](references/shape-annotations.md)
- Draw rectangles, ellipses, lines, arrows, and paths
- Customize shapes with stroke color, stroke width, and fill color
- Rotate shapes with degree parameter
- Delete shape annotations
- Customize default stroke colors
- Shape changing and customization events

### Image Annotations
📄 **Read:** [references/image-annotations.md](references/image-annotations.md)
- Add images or icons as annotations
- Control position, size, rotation, and opacity
- Aspect ratio preservation
- Watermarks and decorative elements

### Filters
📄 **Read:** [references/filters.md](references/filters.md)
- Apply predefined filters (Chrome, Cold, Warm, Grayscale, Sepia, Invert)
- Image filtering event
- Reset filter to original

### Fine-Tuning
📄 **Read:** [references/finetune.md](references/finetune.md)
- Adjust brightness, contrast, saturation
- Control hue, exposure, blur, opacity
- Finetune value changing events
- Real-time adjustments with sliders

### Undo and Redo
📄 **Read:** [references/undo-redo.md](references/undo-redo.md)
- Undo/redo operations with 16-step history
- Keyboard shortcuts (Ctrl+Z, Ctrl+Y)
- History management and limits

### Toolbar Customization
📄 **Read:** [references/toolbar-customization.md](references/toolbar-customization.md)
- Built-in toolbar items (20+ default tools)
- Add, remove, enable, disable toolbar items
- Custom toolbar items with event handlers
- Contextual toolbar for annotations
- Toolbar templates for complete customization
- Toolbar created and item clicked events

### Quick Access Toolbar
📄 **Read:** [references/quick-access-toolbar.md](references/quick-access-toolbar.md)
- Quick access toolbar for annotations
- Show/hide quick access toolbar
- Add custom items to quick access toolbar
- Quick access toolbar open event

### Resize Image
📄 **Read:** [references/resize-image.md](references/resize-image.md)
- Resize with or without aspect ratio
- Width and height parameters
- Resizing event with before/after dimensions

### Frame Decoration
📄 **Read:** [references/frame-decoration.md](references/frame-decoration.md)
- Apply frames (Mat, Bevel, Line, Inset, Hook)
- Customize frame color, size, and line style
- Frame changing event

### Z-Order Layering
📄 **Read:** [references/z-order-layering.md](references/z-order-layering.md)
- Bring forward/send backward annotations
- Bring to front/send to back
- Manage annotation layer order

### Redact Sensitive Information
📄 **Read:** [references/redact-sensitive-info.md](references/redact-sensitive-info.md)
- Blur sensitive areas
- Pixelate sensitive information
- Redact CRUD operations (select, update, delete, get)
- Privacy and compliance

### Accessibility and Localization
📄 **Read:** [references/accessibility-localization.md](references/accessibility-localization.md)
- WCAG 2.2, Section 508 compliance
- Screen reader support
- Keyboard shortcuts (Ctrl+Z, Ctrl+S, Ctrl+O, Delete, Enter, Escape)
- RTL language support
- Localization with 120+ locale keys

### Image Restrictions and Validation
📄 **Read:** [references/image-restrictions-validation.md](references/image-restrictions-validation.md)
- Allowed file extensions (.jpg, .png, .svg, .webp, .bmp)
- Min and max file size restrictions
- File validation and error alerts

### Clear Image
📄 **Read:** [references/clear-image.md](references/clear-image.md)
- Clear editor state
- Dialog reuse patterns
- Remove previously loaded images

### Fit to Width and Height
📄 **Read:** [references/fit-width-height.md](references/fit-width-height.md)
- Fit image to editor container width
- Fit image to editor container height
- Zoom calculations for perfect fit

### Render in Dialog
📄 **Read:** [references/render-in-dialog.md](references/render-in-dialog.md)
- Render Image Editor within Dialog component
- Content template integration
- Dialog show/hide patterns

### Reset Image
📄 **Read:** [references/reset-image.md](references/reset-image.md)
- Reset all modifications to original state
- Restore unmodified version
- Clear annotations and effects

## Quick Start Example

```tsx
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import React from 'react';

function App() {
  let imgObj: ImageEditorComponent;

  function imageEditorCre