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

• 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

• 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

• 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

• 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

• Applying image filters (Cold, Warm, Chrome, Sepia, Invert, Grayscale, Black & White)
• Fine-tuning brightness and contrast
• Adjusting saturation levels
• Hue adjustments
• Exposure control
• Blur effects
• Opacity adjustments
• Filter and finetune event handling

Frame Application

📄 Read: references/frames.md

• Frame types (Mat, Bevel, Line, Hook, Inset)
• Frame color customization
• Gradient color support
• Frame size and offset configuration
• Border radius for line-type frames
• Frame line styles (solid, dashed, dotted)
• Frame changing events

Redaction & Privacy

📄 Read: references/redaction.md

• Drawing redactions (blur and pixelate types)
• Customizing redaction properties
• Selecting specific redactions
• Updating redaction settings
• Deleting redactions
• Retrieving redaction details

Open & Save Operations

📄 Read: references/open-and-save.md

• Opening images from multiple sources (local, base64, blob, uploader, file manager, treeview)
• Saving with format selection (PNG, JPEG, SVG, WEBP, BMP)
• Image quality control for JPEG format
• Exporting as different formats
• Converting to base64, byte arrays, and blob
• Watermark application during open/save
• Custom save dialogs and server uploads
• Image settings for custom dimensions

Undo & Redo Operations

📄 Read: references/undo-redo.md

• Implementing undo functionality
• Implementing redo functionality
• Understanding history limitations (16 steps)
• Keyboard shortcuts (Ctrl+Z, Ctrl+Y)

Toolbar Customization

📄 Read: references/toolbar.md

• Built-in toolbar items and their functions
• Adding custom toolbar items
• Showing/hiding toolbar
• Enabling/disabling specific items
• Contextual toolbar customization
• Toolbar templates for complete customization
• Toolbar events (toolbarCreated, toolbarItemClicked, toolbarUpdating)

Quick Access Toolbar

📄 Read: references/quick-access-toolbar.md

• Quick access toolbar visibility control
• Adding custom items to quick access toolbar
• Customizing annotation-specific actions
• Event handling for toolbar operations

Z-Order & Layering

📄 Read: references/z-order.md

• Bringing annotations forward
• Sending annotations backward
• Bringing annotations to front
• Sending annotations to back
• Managing multiple annotation layers

Accessibility & Compliance

📄 Read: references/accessibility.md

• WCAG 2.2 compliance standards
• Keyboard shortcuts and navigation
• Screen reader support
• Color contrast standards
• Mobile accessibility support
• RTL (Right-to-Left) support

API Reference

📄 Read: references/api.md

• Complete properties reference with types and defaults
• All methods with parameters and return types
• All events with descriptions
• Event arguments reference
• Filter, finetune, shape, and frame types
• Selection shapes and export formats
• Usage examples for properties and events

Localization

📄 Read: references/localization.md

• Setting locale configuration
• Customizing UI text in multiple languages
• Translation keywords and values
• Supporting international audiences

Image Restrictions & Validation

📄 Read: references/image-restrictions.md

• Specifying allowed file extensions
• Setting minimum file size limits
• Setting maximum file size limits
• Validation error messages
• Upload settings configuration

Image Resizing

📄 Read: references/resize.md

• Resizing image dimensions
• Aspect ratio preservation
• Resize event handling
• Custom dimension specifications

End-User Capabilities

📄 Read: references/end-user-capabilities.md

• User-facing features and workflows
• Opening images through UI
• Zoom operations via toolbar, pinch, mouse wheel, keyboard
• Panning functionality
• Toolbar-based transformations
• Annotation creation and editing
• Filter and fine-tune application
• Save and export workflows

How-To Guides

📄 Read: references/clear-image.md - Clearing editor state for dialog reuse

📄 Read: references/fit-to-width-height.md - Dynamic zoom fitting

📄 Read: references/render-in-dialog.md - Modal dialog integration

📄 Read: references/reset-image.md - Reverting to original state

Quick Start Example

import { Component } from '@angular/core';
import { ImageEditorModule } from '@syncfusion/ej2-angular-image-editor';

@Component({
  imports: [ImageEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div style="width: 550px; height: 350px;">
      <ejs-imageeditor 
        #imageEditor
        [toolbar]="['Open', 'Undo', 'Redo', 'Crop', 'Annotate', 'Finetune', 'Filter', 'Resize', 'Save', 'Reset']"
      ></ejs-imageeditor>
    </div>
    <button (click)="openImage()">Open Image</button>
  `
})
export class AppComponent {
  @ViewChild('imageEditor') imageEditor: any;

  openImage() {
    this.imageEditor.open('path-to-image.png');
  }

  addAnnotation() {
    this.imageEditor.drawText(50, 50, 'Sample Text', 'Arial', 12, false, false, '#000000');
  }

  rotateImage() {
    this.imageEditor.rotate();
  }

  () {
    ..(, );
  }
}

Common Patterns

Pattern 1: Open Image & Add Annotations

// Open image from file
this.imageEditor.open('image.png');

// Add text annotation
this.imageEditor.drawText(100, 100, 'Important', 'Arial', 16, true, false, '#FF0000');

// Add rectangle
this.imageEditor.drawRectangle(50, 50, 200, 150, 2, '#0000FF', '#FFFFFF');

// Add freehand drawing
this.imageEditor.freehandDraw();

Pattern 2: Apply Filters & Fine-tuning

// Apply filter
this.imageEditor.applyImageFilter('Sepia');

// Fine-tune brightness
this.imageEditor.finetuneImage('Brightness', 50);

// Fine-tune contrast
this.imageEditor.finetuneImage('Contrast', -30);

// Fine-tune saturation
this.imageEditor.finetuneImage('Saturation', 40);

Pattern 3: Crop & Transform

// Select region for cropping
this.imageEditor.select('Custom', 50, 50, 300, 200);

// Crop the selected region
this.imageEditor.crop();

// Rotate after cropping
this.imageEditor.rotate(90);

// Flip horizontally
this.imageEditor.flip('Horizontal');

Pattern 4: Customized Toolbar

toolbar: [
  'Open',
  'Undo',
  'Redo',
  'Crop',
  'RotateLeft',
  'RotateRight',
  'HorizontalFlip',
  'VerticalFlip',
  'Annotate',
  'Finetune',
  'Filter',
  'Frame',
  'Redact',
  'Resize',
  'Save',
  'Reset'
];

Pattern 5: Save with Different Formats

// Save as PNG (default)
this.imageEditor.export('myImage', 'png');

// Save as JPEG with quality
this.imageEditor.export('myImage', 'jpeg', 90);

// Get base64 data
const base64Data = this.imageEditor.getImageData();

// Save as blob
this.imageEditor.getImageData().then(data => {
  const blob = this.dataURLtoBlob(data);
  // Send to server
});

Key Props & Configuration

Property	Type	Description	When to Use
toolbar	array	List of toolbar items to display	Customize visible tools
toolbarTemplate	template	Custom template for entire toolbar	Complete toolbar redesign
uploadSettings	object	File validation rules (extensions, size)	Restrict upload formats/sizes
zoomSettings	object	Min/max zoom factor configuration	Control zoom boundaries
fontFamily	array	Additional font families for text	Add custom fonts
locale	string	Language for UI text	Multi-language support
height	string/number	Component height	Layout sizing
width	string/number	Component width	Layout sizing
showQuickAccessToolbar	boolean	Show quick access toolbar	Control quick toolbar visibility

Common Use Cases

1. Photo Editing App - Full-featured image editor with all tools
2. Document Annotation - Highlight, mark, and comment on documents
3. Social Media Content - Apply filters, frames, and text to images
4. Privacy Protection - Redact sensitive information before sharing
5. Profile Picture Editor - Crop, rotate, and apply filters to avatars
6. Real Estate Listings - Rotate, frame, and annotate property photos
7. Feedback & Collaboration - Annotate screenshots for team communication
8. Template Design - Layer annotations with z-order for custom layouts
9. Form Image Capture - Crop, rotate, and optimize mobile camera captures
10. Watermark Application - Add text and image watermarks for branding

Reference Files

All detailed documentation is organized by feature in the references/ folder. Each reference file is self-contained and covers specific functionality in depth.

See individual reference files for code examples, event handling, and advanced configurations.