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(90);
  }

  saveImage() {
    this.imageEditor.export('edited-image', 'png');
  }
}

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

Photo Editing App - Full-featured image editor with all tools
Document Annotation - Highlight, mark, and comment on documents
Social Media Content - Apply filters, frames, and text to images
Privacy Protection - Redact sensitive information before sharing
Profile Picture Editor - Crop, rotate, and apply filters to avatars
Real Estate Listings - Rotate, frame, and annotate property photos
Feedback & Collaboration - Annotate screenshots for team communication
Template Design - Layer annotations with z-order for custom layouts
Form Image Capture - Crop, rotate, and optimize mobile camera captures
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.

syncfusion-angular-image-editor