syncfusion-angular-image-editor

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

---
name: syncfusion-angular-image-editor
description: Implement feature-rich image editing in Angular applications using Syncfusion Image Editor. Use this skill whenever user mentions editing images, adding annotations, applying filters, cropping, transforming, or manipulating images in Angular. Covers installation, all annotation types (text, shapes, freehand), transformations (rotate, flip, zoom), filtering, frame application, redaction, open/save functionality, undo/redo, toolbar customization, accessibility, and advanced features like z-ordering and dialog integration.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
  category: "File Viewers & Editors"
---

# Implementing Syncfusion Angular Image Editor

The Syncfusion Angular Image Editor component provides a comprehensive, feature-rich solution for image editing and annotation. It allows developers to integrate professional image editing capabilities directly into Angular applications, supporting a wide range of editing operations including annotations, transformations, filtering, and more.

## Component Overview

The Image Editor is a powerful, standalone component that provides:

- **Complete image editing suite** with 20+ built-in tools
- **Flexible annotation system** supporting text, shapes, and freehand drawing
- **Advanced transformations** including rotate, flip, straighten, zoom, and pan
- **Professional image filters** (cold, warm, chrome, sepia, invert, grayscale, etc.)
- **Fine-tuning controls** for brightness, contrast, saturation, hue, exposure, blur, and opacity
- **Frame application** with multiple frame types and customization options
- **Redaction tools** for privacy protection (blur and pixelate)
- **Multiple input/output options** including local files, base64, blob, file uploader, and file manager
- **Rich undo/redo history** (16 steps maximum)
- **Fully customizable toolbars** with contextual and quick-access options
- **Z-order management** for annotation layering
- **Mobile-friendly** with touch gestures (pinch zoom)
- **Full accessibility support** including WCAG 2.2, keyboard navigation, and screen reader compatibility
- **Multi-language support** with 150+ localization keywords

## Documentation and Navigation Guide

### Getting Started & Installation
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup
- Dependencies and module imports
- Basic component implementation
- CSS imports and theme configuration
- First render and initialization

### Annotations & Drawing
📄 **Read:** [references/annotations.md](references/annotations.md)
- Text annotations with formatting (bold, italic, underline, strikethrough)
- Multiline text support
- Font family and text color customization
- Freehand drawing with stroke adjustment
- Shape annotations (rectangles, ellipses, lines, arrows, paths)
- Image annotations and watermarking
- Deleting and managing annotations
- Shape styling and default customization

### Selection & Cropping
📄 **Read:** [references/selection-and-cropping.md](references/selection-and-cropping.md)
- Custom selection shapes
- Square and circle selections
- Aspect ratio selections (2:3, 3:2, 4:3, 16:9, etc.)
- Cropping selected regions
- Selection event handling
- Locking selection areas
- Custom ratio selection during cropping

### Image Transformations
📄 **Read:** [references/transform.md](references/transform.md)
- Rotating images (clockwise/counterclockwise)
- Flipping horizontally and vertically
- Straightening images with fine adjustments
- Zooming in/out with min/max zoom levels
- Panning functionality and events
- Transform event handlers
- Keyboard shortcuts for transformations

### Filtering & Fine-tuning
📄 **Read:** [references/filter-and-finetune.md](references/filter-and-finetune.md)
- Applying image filters (Cold, Warm, Chrome, Sepia, Invert, Grayscale, Black & White)
- Fine-tuning brightness and contrast
- Adjusting saturation levels
- Hue adjustments
- Ex