Quick Actions

Custom quick actions are one-click editing functionalities, that either reuse existing functionalities or add new one and combine those into a simple workflow triggered by a user interactions as simple as a button click. There are multiple entry points where this quick action can be added.

Quick Action: Background Removal

The background removal plugin is a great example of a one-click quick action. It allows you to remove the background of an image with a single click. After adding the plugin, you won’t see any immediate change to the editor. You will need to define where to place this feature.

import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';

[...]

// Adding this plugin will automatically register user interface components
cesdk.addPlugin(BackgroundRemovalPlugin());

// Prepend it to the canvas menu ...
cesdk.ui.setCanvasMenuOrder([
  'ly.img.background-removal.canvasMenu'
  ...cesdk.ui.getCanvasMenuOrder(),
]);

// ... or the inspector bar
cesdk.ui.setInspectorBar([
  'ly.img.background-removal.inspectorBar'
  ...cesdk.ui.getInspectorBar(),
]);

Quick Action: Vectorizer

For the vectorizer plugin, the process is exactly the same. Simply install and add the plugin, then use the component Ids to extend the user interface.

import VectorizerPlugin from '@imgly/plugin-vectorizer-web';

[...]

// Adding this plugin will automatically register user interface components
cesdk.addPlugin(VectorizerPlugin());

// Prepend it to the canvas menu ...
cesdk.ui.setCanvasMenuOrder([
  'ly.img.vectorizer.canvasMenu'
  ...cesdk.ui.getCanvasMenuOrder(),
]);

// ... or the inspector bar
cesdk.ui.setInspectorBar([
  'ly.img.vectorizer.inspectorBar'
  ...cesdk.ui.getInspectorBar(),
]);