TOAST UI ImageEditor

TOAST UI ImageEditor is a full-featured image editor built using HTML5 Canvas. It provides powerful filters and photo manipulation capabilities. The project is available in three main packages depending on your technology stack:

• tui-image-editor: The core plain JavaScript component.
• @toast-ui/vue-image-editor: A Vue wrapper component.
• @toast-ui/react-image-editor: A React wrapper component.

The image editor is structured into two major layers:

1. Middle Layer: Managed by the ImageEditor object, it handles the API and communicates with the UI. It consists of the Invoker (manages Undo/Redo), Command, and CommandFactory (registers and creates commands).
2. Graphics Layer: The drawing core. It uses Canvas (powered by fabric.js) to perform drawing operations. This layer includes Component modules for specific functions (like cropping or text) and manages Drawing Modes.

You can use the built-in UI via the includeUI option, or implement your own UI by interacting directly with the ImageEditor API.

TUI Image Editor comes with default themes and provides an API for full customization:

• Built-in Themes: Includes black and white themes.
• Customization: You can modify the existing theme files or use the provided API to create entirely new custom themes to match your application's design.

The editor includes several built-in integration functions for managing the editing workflow:

• Download: Save the edited image.
• Image Load: Load a new image into the canvas.
• Undo/Redo: Revert or re-apply previous actions (supports keyboard shortcuts).
• Reset: Revert the image to its original state.
• Delete Object: Remove specific elements like Shapes, Lines, or Mask Images from the canvas.

The TUI Image Editor provides a comprehensive suite of photo manipulation and filtering tools:

Photo Manipulation

• Crop: Adjust the visible area of the image.
• Flip: Mirror the image horizontally or vertically.
• Rotation: Rotate the image.
• Drawing: Freehand drawing on the image.
• Shape: Add geometric shapes.
• Icon: Add icons to the image.
• Text: Add text overlays.
• Mask: Apply mask filters.
• Image Filter: Apply various visual filters.

Powerful Filter Functions

Available filters include:

• Grayscale, Invert, Sepia, Sepia2
• Blur, Sharpen, Emboss
• RemoveWhite, Brightness, Noise, Pixelate
• ColorFilter, Tint, Multiply, Blend, Blend-righten, Blend-diff

You can load the ImageEditor component using ES modules, CommonJS, or via <script> tags. If you only need the Vue wrapper component without the full library, you can import the Single File Component directly.

// es modules
import { ImageEditor } from '@toast-ui/vue-image-editor';

// commonjs require
const { ImageEditor } = require('@toast-ui/vue-image-editor');

// Using only Vue wrapper component (Single File Component)
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue';

Install the Vue wrapper for TOAST UI Image Editor using npm.

Note: If you install other packages and lose the dependency on fabric, you must manually reinstall fabric@~4.2.0 using the --no-save --no-optional flags.

npm install --save @toast-ui/vue-image-editor

# If fabric dependency is lost, run:
npm install --no-save --no-optional fabric@~4.2.0

The image editor does not automatically save files to a server. To save an edited image, you must extract the image data as a Base64 string using toDataURL() and then transmit that data to your server via an Ajax request (e.g., POST).

// Step 1. Import image data to be saved in the image editor.
var dataURL = imageEditor.toDataURL();

// Step 2. Send base64 encoded image data via Ajax to the server.
$.ajax({
  type: 'POST',
  url: serverUrl,
  data: {
    imgBase64: dataURL, // Data from Step 1.
  },
}).done(function () {
  console.log('saved!');
});

For detailed usage, refer to the following official resources:

• Getting Started: Basic Tutorial
• Tutorials: Full Tutorial List
• Examples: Interactive Examples
• API Reference: Full API Documentation

Install the React wrapper for TOAST UI Image Editor using npm.

npm install --save @toast-ui/react-image-editor