Syncfusion Angular Image Editor

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

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.