Implementing Syncfusion TypeScript Image Editor

A comprehensive skill for implementing the Syncfusion Image Editor control in TypeScript applications. This skill covers initialization, image loading/saving, annotation tools, image manipulation (zoom, crop, rotate, transform), filtering, fine-tuning, accessibility, and customization patterns.

When to Use This Skill

Use this skill when the user needs to:

• Add image editing capabilities to TypeScript applications
• Enable image annotations (text, freehand drawing, shapes, redaction)
• Implement image transformations (crop, rotate, flip, straighten, resize)
• Apply filters and fine-tuning (brightness, contrast, saturation, blur, sharpen)
• Set up image import/export workflows (open, save, download)
• Configure toolbars and quick access settings
• Implement layer management and z-order operations
• Add keyboard shortcuts and accessibility features
• Customize themes and styling for the image editor
• Integrate with dialogs and modal workflows
• Handle undo/redo operations and history management

Trigger Keywords: Image editing, image editor, annotation tools, image filters, crop image, redact image, image transformation, draw on image, ej2-image-editor, Syncfusion image editor, image processing, TypeScript editor

Overview

The Syncfusion Image Editor is a powerful, feature-rich component for professional image editing in web applications. Key capabilities include:

• Image Operations - Open, save, export in JPEG, PNG, SVG, WebP, BMP formats
• Zoom & Pan - Multiple zoom methods (toolbar, mouse wheel, pinch, keyboard)
• Transformations - Crop, rotate, flip, straighten, resize with preview
• Annotations - Text, freehand drawing, shapes (rectangles, circles, arrows, lines), redaction, frames
• Filters & Effects - 20+ filter effects plus fine-tuning controls
• Layer Management - Z-order operations, multiple annotations
• History - Full undo/redo support with action tracking
• Accessibility - WCAG 2.2 compliant, keyboard navigation, screen reader support
• Customization - Toolbar, themes, event handlers, quick access
• TypeScript Support - Full type definitions and webpack configuration

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• TypeScript project setup with webpack
• NPM package installation (@syncfusion/ej2-image-editor)
• Dependency management
• CSS theme imports and configuration
• Basic component initialization
• HTML markup setup

Core Operations

📄 Read: references/core-operations.md

• Opening and loading images programmatically
• Supported file formats (JPEG, PNG, SVG, WebP, BMP)
• Saving and exporting images
• File input validation and restrictions
• File type constraints and size limits
• Download vs. save operations

Image Manipulation

📄 Read: references/image-manipulation.md

• Zooming methods (toolbar, mouse wheel, pinch, keyboard, fit-to-width/height)
• Panning and image movement
• Image resizing and scaling operations
• Image rotation and flip operations
• Straightening with sliders
• Image dimension queries
• Canvas and viewport management

Annotation Tools

📄 Read: references/annotation-tools.md

• Text annotations with font customization (family, size, style, color)
• Freehand drawing tools and brush settings
• Shape annotations (rectangles, ellipses, arrows, lines, paths)
• Redaction capabilities and masking
• Frame insertion and styling
• Annotation styling (fill color, stroke color, stroke width)
• Annotation positioning and transformation

Selection and Cropping

📄 Read: references/selection-cropping.md

• Selection types (custom, circle, square, ratio-based)
• Cropping workflow and execution
• Aspect ratio constraints and custom ratios
• Selection manipulation and repositioning
• Crop finalization and preview
• Region management

Filters and Effects

📄 Read: references/filters-effects.md

• Applying filter effects programmatically
• Fine-tuning adjustments (20+ effect types)
• Brightness, contrast, saturation controls
• Blur, sharpen, hue, saturation effects
• Image processing capabilities
• Effect preview and application

Undo and Redo

📄 Read: references/undo-redo.md

• Undo/redo keyboard shortcuts (Ctrl+Z, Ctrl+Y)
• Undo/redo method calls
• Operation history tracking
• History state management
• Action reversal patterns

Layer Management

📄 Read: references/layer-management.md

• Z-order operations and layer stacking
• Bringing layers forward/backward
• Layer arrangement and management
• Working with multiple annotations
• Overlap management

Accessibility

📄 Read: references/accessibility.md

• Complete keyboard shortcut reference (Ctrl+Z, Ctrl+Y, Ctrl+S, Delete, Escape, etc.)
• WCAG 2.2, Section 508, ADA compliance
• Screen reader support and ARIA attributes
• Right-to-Left (RTL) support
• Keyboard navigation patterns
• Color contrast and accessibility best practices
• Mobile device support

Customization

📄 Read: references/customization.md

• Toolbar configuration and customization
• Quick access toolbar setup
• Theme styling and CSS customization
• Theme Studio integration
• CSS variables and custom themes
• Event binding and callbacks
• Configuration options reference

Localization

📄 Read: references/localization.md

• Multi-language support setup
• Language-specific configurations
• Locale settings and resource strings
• RTL (Right-to-Left) support configuration
• Region-specific customizations

How-To Guide

📄 Read: references/how-to-guide.md

• Rendering image editor in dialog/modal windows
• Clearing image before reopening dialogs
• Resetting images to original state
• Fitting images to editor width or height
• Dialog state management
• Common integration patterns

Advanced Patterns

📄 Read: references/advanced-patterns.md

• Event handling patterns and event system
• Custom workflow examples
• Complex integration scenarios
• Performance optimization tips
• TypeScript type definitions and interfaces
• Memory management

Quick Start

Installation

npm install @syncfusion/ej2-image-editor

Basic Initialization

import { ImageEditor } from '@syncfusion/ej2-image-editor';

// Create a new instance
const imageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: ['Open', 'Save', 'ZoomIn', 'ZoomOut', 'Crop', 'Rotate', 'Flip']
});

// Append to a container
imageEditor.appendTo('#imageeditor');

// Open an image
imageEditor.open('path/to/image.jpg');

HTML Setup

<div id="imageeditor"></div>

CSS Themes

@import "@syncfusion/ej2-image-editor/styles/material.css";

Common Patterns

Pattern 1: Basic Image Editor with Full Toolbar

import { ImageEditor } from '@syncfusion/ej2-image-editor';

const imageEditor = new ImageEditor({
    width: '600px',
    height: '400px',
    toolbar: ['Open', 'Save', 'ZoomIn', 'ZoomOut', 'Crop', 
              'Rotate', 'Flip', 'Undo', 'Redo', 'Reset'],
    created: () => {
        imageEditor.open('sample-image.jpg');
    }
});

imageEditor.appendTo('#imageeditor');

Pattern 2: Adding Text Annotation

const dimension = imageEditor.getImageDimension();
imageEditor.drawText(
    dimension.x + 50, 
    dimension.y + 50, 
    'Annotation Text',
    'Arial',      // font family
    30,           // font size
    false,        // bold
    false,        // italic
    'blue',       // text color
    false,        // selected
    null,         // rotation
    '#FFFFCC',    // fill color
    'black'       // stroke color
);

Pattern 3: Applying Filters

// Apply brightness adjustment
imageEditor.finetuneImage('brightness', 30);

// Apply blur effect
imageEditor.filter('Blur', 5);

// Apply multiple effects
imageEditor.finetuneImage('contrast', 20);
imageEditor.finetuneImage('saturation', 15);

Pattern 4: Cropping an Image

// Enable crop selection
imageEditor.drawImage('crop');

// When user completes selection
imageEditor.crop();

// Or programmatically set crop area
imageEditor.crop({
    x: 0,
    y: 0,
    width: 500,
    height: 300
});

Pattern 5: Dialog Integration

import { Dialog } from '@syncfusion/ej2-popups';

const dialog = new Dialog({
    width: '600px',
    height: '450px',
    isModal: true,
    visible: false
});
dialog.appendTo('#dialog');

const imageEditor = new ImageEditor({
    width: '100%',
    height: '100%'
});
imageEditor.appendTo('#imageeditor');

document.getElementById('openBtn').onclick = () => {
    dialog.show();
    imageEditor.open('image.jpg');
};

Key APIs

Essential Methods

Method	Purpose
open(url)	Load an image from URL or file path
save()	Save the edited image
export()	Export image in specified format
crop()	Execute crop operation
rotate(degrees)	Rotate image by specified degrees
flip(direction)	Flip image (horizontal or vertical)
zoom(level)	Set zoom level
drawText(...)	Add text annotation
drawImage(type)	Draw shapes or other objects
undo()	Undo last action
redo()	Redo last undone action
reset()	Reset image to original state
clearImage()	Clear current image
filter(filterName, value)	Apply filter effects
finetuneImage(property, value)	Apply fine-tuning adjustments

Key Properties

Property	Type	Purpose
width	string	Editor container width
height	string	Editor container height
toolbar	string[]	Toolbar items to display
allowRotation	boolean	Enable/disable rotation
enableZoom	boolean	Enable/disable zoom
allowCropping	boolean	Enable/disable cropping
theme	string	Color theme for UI

Events

Event	When Triggered
created	After component initialization
imageLoaded	After image is loaded
beforeSave	Before saving image
annotationAdded	After annotation added
selectionChanged	When selection changes
transforming	During transformation

Common Use Cases

Professional Image Editing Suite - Full-featured editor with all tools Annotation Workflow - Markup and redaction for documents Quick Crop Tool - Simplified UI focused on cropping Social Media Tool - Preset aspect ratios for platforms Screenshot Markup - Quick annotation on screenshots Document Processing - Straighten, crop, and export scans Dialog Integration - Modal image editing workflows

Related Skills

• implementing-rich-text-editor - For text document editing
• implementing-buttons - For control customization
• implementing-dialogs - For modal workflow integration