syncfusion-react-image-editor

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: syncfusion-react-image-editor
description: Master Syncfusion React Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
  category: "File Viewers & Editors"
---

# 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)