Skip to main content Home Creators syncfusion vue-ui-components-skills syncfusion-vue-image-editor
syncfusion-vue-image-editor Master Syncfusion Vue Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-image-editorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-vue-image-editor description Master Syncfusion Vue Image Editor for comprehensive image editing. Use this when users need to edit images, add annotations, apply filters, manage layers, or implement image editing features. Supports multiple formats (PNG, JPEG, SVG, WEBP, BMP), annotations (text, shapes, freehand, images), effects (filters, finetune), and accessibility features. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"File Viewers & Editors"}
Implementing Syncfusion Vue Image Editor
The Syncfusion Vue Image Editor is a comprehensive, feature-rich component for editing images directly in your Vue 3 applications. It provides an intuitive interface with powerful tools for transformations, annotations, effects, and more.
Component Overview
The Image Editor combines a canvas-based editing environment with a comprehensive toolbar and contextual tools. It supports:
Multiple Input Sources: Files, URLs, base64, blobs, file managers, treeviewsRich Annotation Support: Text (with styling), shapes, freehand drawings, watermarksProfessional Effects: Filters and fine-tuning controlsAdvanced Operations: Z-order management, redaction, frame decorationAccessibility First: Full keyboard navigation, WCAG compliance, RTL support, 120+ localization keysFlexible Integration: Standalone or within dialogs, with customizable toolbars
Documentation and Navigation Guide
🔹 API Reference
📄 Read: references/api.md
Complete API documentation with all properties, methods, and events
Properties overview (core, toolbar, settings)
Methods for image operations, transformations, annotations
Events for lifecycle, interactions, effects, and toolbars
Enums and type definitions (ArrowheadType, FrameType, RedactType, etc.)
Complete working examples with verified method signatures
Getting Started
Installation with Vite and create-vue
CSS imports and theme setup
Basic component initialization
Setting width, height, and initial rendering
Opening and Saving Images
Open from file paths, URLs, base64 strings, blobs
Open from file uploader, file manager, and treeview
Save/export as PNG, JPEG, SVG, WEBP
Image dimensions and aspect ratio control
File opened, saving, and lifecycle events
Selection and Cropping
Insert custom, square, and circle selections
Crop with aspect ratios (2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 5:7, 7:5, 9:16, 16:9)
Crop method and selection events
Maintain original image size during cropping
Lock selection area during resizing
Transform: Rotate, Flip, and Straighten
Rotate clockwise/counter-clockwise by degrees
Flip horizontally and vertically
Straighten images with fine degree adjustments (-45° to +45°)
Transform annotations along with image
Rotating and flipping events
Zoom and Pan Operations
Zoom in/out with configurable min/max factors
Pan when zoomed or during cropping
Zoom triggers (toolbar, pinch, mouse wheel, keyboard)
Zooming and panning events
Zoom point calculations
Text Annotations
Add text with position, content, and font settings
Text styling (bold, italic, underline, strikethrough)
Font families, sizes, and colors
Multiline text with newline characters
Delete text annotations
Customize font color via shapeChanging event
Freehand Drawing
Enable/disable freehand drawing mode
Customize stroke width and color
Delete freehand annotations
Adjust stroke during drawing via shapeChanging event
Shape Annotations
Draw rectangles, ellipses, lines, arrows, and paths
Customize shapes with stroke color, stroke width, and fill color
Rotate shapes with degree parameter
Delete shape annotations
Customize default stroke colors
Shape changing and customization events
Image Annotations
Add images or icons as annotations
Control position, size, rotation, and opacity
Aspect ratio preservation
Watermarks and decorative elements
Filters
Apply predefined filters (Chrome, Cold, Warm, Grayscale, Sepia, Invert)
Image filtering event
Reset filter to original
Fine-Tuning
Adjust brightness, contrast, saturation
Control hue, exposure, blur, opacity
Finetune value changing events
Real-time adjustments with sliders
Undo and Redo
Undo/redo operations with 16-step history
Keyboard shortcuts (Ctrl+Z, Ctrl+Y)
History management and limits
Toolbar Customization
Built-in toolbar items (20+ default tools)
Add, remove, enable, disable toolbar items
Custom toolbar items with event handlers
Contextual toolbar for annotations
Toolbar templates for complete customization
Toolbar created and item clicked events
Quick Access Toolbar
Quick access toolbar for annotations
Show/hide quick access toolbar
Add custom items to quick access toolbar
Quick access toolbar open event
Resize Image
Resize with or without aspect ratio
Width and height parameters
Resizing event with before/after dimensions
Frame Decoration
Apply frames (Mat, Bevel, Line, Inset, Hook)
Customize frame color, size, and line style
Frame changing event
Z-Order Layering
Bring forward/send backward annotations
Bring to front/send to back
Manage annotation layer order
Redact Sensitive Information
Blur sensitive areas
Pixelate sensitive information
Redact CRUD operations (select, update, delete, get)
Privacy and compliance
Accessibility and Localization
WCAG 2.2, Section 508 compliance
Screen reader support
Keyboard shortcuts (Ctrl+Z, Ctrl+S, Ctrl+O, Delete, Enter, Escape)
RTL language support
Localization with 120+ locale keys
Image Restrictions and Validation
Allowed file extensions (.jpg, .png, .svg, .webp, .bmp)
Min and max file size restrictions
File validation and error alerts
Clear Image
Clear editor state
Dialog reuse patterns
Remove previously loaded images
Fit to Width and Height
Fit image to editor container width
Fit image to editor container height
Zoom calculations for perfect fit
Render in Dialog
Render Image Editor within Dialog component
Content template integration
Dialog show/hide patterns
Reset Image
Reset all modifications to original state
Restore unmodified version
Clear annotations and effects
Quick Start Example <template>
<div id="container">
<ImageEditorComponent
ref="imgObj"
width="550px"
height="350px"
:created="imageEditorCreated"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ImageEditorComponent } from '@syncfusion/ej2-vue-image-editor';
import { Browser } from '@syncfusion/ej2-base';
const imgObj = ref(null);
const imageEditorCreated = () => {
if (Browser.isDevice) {
imgObj.value?.open('https://ej2.syncfusion.com/vue/documentation/image-editor/images/flower.jpeg');
} else {
imgObj.value?.open('https://ej2.syncfusion.com/vue/documentation/image-editor/images/bridge.jpeg');
}
};
</script>
Common Patterns
Pattern 1: Open + Edit + Save Workflow
Open image via open() method
Apply transformations, annotations, or effects
Use export() to save as PNG/JPEG/SVG/WEBP
Optionally convert to base64 or blob for backend storage
Pattern 2: Responsive Toolbar
Define custom toolbar items in toolbar property
Handle clicks via @toolbarItemClicked event
Execute methods like rotate(), zoom(), drawText() based on clicked item
Update contextual toolbar via @toolbarUpdating event
Pattern 3: Annotation Workflow
Enable annotation mode (freehand, text, shape)
Customize via @shapeChanging event (color, stroke, font)
Delete via deleteShape() with shape ID
Manage layers via z-order methods
Pattern 4: Dialog Integration
Render Image Editor in Dialog's content template
Load image when dialog opens via @fileOpened event
Call clearImage() before closing dialog
Retrieve edited image data via export() or getImageData()
Pattern 5: Filter + Finetune Pipeline
Apply filter via applyImageFilter()
Fine-tune via finetuneImage() (brightness, contrast, etc.)
Listen to @imageFiltering and @finetuneValueChanging events
Combine effects for professional results
Key Properties Property Type Purpose widthstring Editor canvas width (e.g., "550px", "100%") heightstring Editor canvas height (e.g., "350px", "100%") toolbararray Customize toolbar items and visibility fontFamilyobject Add custom font families uploadSettingsobject Configure file restrictions (extensions, size) zoomSettingsobject Set min/max zoom factors showQuickAccessToolbarboolean Show/hide quick access toolbar localestring Set localization (e.g., 'de-DE')
Key Events Event Trigger Use Case @createdComponent initialized Load image on startup @fileOpenedImage loaded Add watermarks, apply defaults @beforeSaveBefore export Validate, add metadata @croppingDuring crop Prevent scaling, lock dimensions @zoomingDuring zoom Validate zoom level @rotatingDuring rotate Track rotation angle @shapeChangingAnnotation modified Customize stroke, font @toolbarUpdatingToolbar rendered Add/remove contextual items
Supported File Formats Open: PNG, JPEG, JPG, SVG, WEBP, BMP (local, URL, base64, blob)
Save/Export: PNG, JPEG, SVG, WEBP
Next Steps 