Syncfusion Vue Image Editor

SyncfusionDocument & Image ToolsJavaScript

Edit and annotate images interactively in Vue applications.

  • Supports cropping, rotating, flipping, and zooming images.
  • Annotate images with shapes, text, and freehand drawings.
  • Export images in JPEG, PNG, and SVG formats easily.
Syncfusion logo

Prices from:

Loading...
Available in
Syncfusion Essential Studio UI Component SuiteLoading
Syncfusion Essential Studio EnterpriseLoading
Syncfusion Vue Image Editor product image
Syncfusion Vue Image Editor offers comprehensive image editing capabilities within Vue applications. It enables precise cropping with customizable selections, image transformations like rotation and flipping, and rich annotations including shapes, text, and freehand drawings. Users can apply filters, zoom, pan, and export their edits to common formats with customizable quality and naming options.

Selection and Cropping

Provides multiple selection types including square, circle, and predefined aspect ratios. Users can drag and resize selection areas for precise cropping.

Annotations

Includes tools to add and customize text, shapes (rectangles, ellipses, lines), freehand drawings, images, paths, and arrows to images.

Image Transformation

Allows rotating images clockwise or counterclockwise, flipping them horizontally or vertically, and adjusting zoom levels.

Undo and Redo

Supports reversing and reapplying actions during the editing process for flexible adjustments.

Zooming and Panning

Enables zooming via pinch gestures, mouse wheel, and keyboard shortcuts. Pan tool reveals hidden image areas during zoom.

Loading and Exporting Images

Load images from base64 strings or URLs with support for PNG, JPEG, and SVG. Export edited images in these formats with configurable file names and quality.

Customizable Toolbar

The toolbar includes controls for all editing features and can be customized with predefined or user-defined items.

Quick Access Toolbar

Displays context-sensitive toolbar when selecting annotations, enabling quick actions such as clone, delete, and text editing.

Frames and Resizing

Add decorative frames around images and resize images to specified dimensions for various use cases.

Redact Support

Conceal sensitive areas by applying blur or pixelation effects, supporting privacy compliance.

Localization and Theming

Localize UI strings for different languages and apply built-in or custom themes, including Bootstrap and Tailwind CSS.

Product Compatibility

Review the details below to ensure this product is supported within your environment.

Component Type

  • JavaScript

JavaScript Platform

  • Vue.js