Vue.js Image Editor SDK

This CE.SDK configuration is fully customizable and offers a range of features that cater to various use cases, from simple photo adjustments and image compositions with background removal to programmatic editing at scale. Whether you are building a photo editing application for social media, e-commerce, or any other platform, the CE.SDK Vue.js Image Editor provides the tools you need to deliver a best-in-class user experience.

Key Capabilities of the Vue.js image Editor#

Transform

Easily perform operations like cropping, rotating, and resizing your design elements to achieve the perfect composition.

Asset Management

Import and manage stickers, images, shapes, and other assets to build intricate and visually appealing designs.

Text Editing

Add and style text blocks with a variety of fonts, colors, and effects, giving users the creative freedom to express themselves.

Client-Side Processing

All editing operations are performed directly in the browser, ensuring fast performance without the need for server dependencies.

Headless & Automation

Programmatically edit designs using the engine API, allowing for automated workflows and advanced integrations within your application.

Extendible

Enhance functionality with plugins and custom scripts, making it easy to tailor the editor to specific needs and use cases.

Customizable UI

Design and integrate custom user interfaces that align with your application’s branding and user experience requirements.

Background Removal

Utilize the powerful background removal plugin to allow users to effortlessly remove backgrounds from images, entirely on the Client-Side.

Filters & Effects

Choose from a wide range of filters and effects to add professional-grade finishing touches to photos, enhancing their visual appeal.

Size Presets

Access a variety of size presets tailored for different use cases, including social media formats and print-ready dimensions.

Browser Support#

The CE.SDK Photo Editor is optimized for use in modern web browsers, ensuring compatibility with the latest versions of Chrome, Firefox, Edge, and Safari.

Prerequisites#

To get started with the CE.SDK Photo Editor, ensure you have the latest versions of Node.js and NPM installed.

Supported File Types#

The CE.SDK Photo Editor supports loading, editing, and saving various image formats directly in the browser. Supported formats include:

• JPG
• PNG
• SVG
• WEBP

Exports can be made in formats such as JPG, PNG, and SVG, depending on your requirements.

Getting Started#

If you're ready to start integrating CE.SDK into your Vue.js application, check out the CE.SDK Getting Started guide. In order to configure the editor for an image editing use case consult our photo editor UI showcase and its reference implementation.

Understanding CE.SDK Architecture & API#

The following sections provide an overview of the key components of the CE.SDK photo editor UI and its API architecture.

If you're ready to start integrating CE.SDK into your Vue.js application, check out our Getting Started guide or explore the Essential Guides.

CreativeEditor Photo UI#

The CE.SDK photo editor UI is a specific configuration of the CE.SDK that focuses the Editor UI on essential photo editing features. It also includes our powerful background removal plugin that runs entirely on the user's device, saving on computing costs.

This configuration can be further modified to suit your needs. Key components include:

• Canvas: The primary workspace where users interact with their photo content.
• Dock: Provides access to tools and assets that are not directly related to the selected image or block, often used for adding or managing assets.
• Inspector Bar: Controls properties specific to the selected block, such as size, rotation, and other adjustments.
• Canvas Menu: Provides block-specific settings and actions such as deletion or duplication.
• Navigation Bar: Offers global actions such as undo/redo, zoom controls, and access to export options.
• Canvas Bar: For actions affecting the canvas or scene as a whole, such as adding pages or controlling zoom. This is an alternative place for actions like zoom or undo/redo.

Learn more about interacting with and customizing the photo editor UI in our design editor UI guide.

CreativeEngine#

At the heart of CE.SDK is the CreativeEngine, which powers all rendering and design manipulation tasks. It can be used in headless mode or integrated with the CreativeEditor UI. Key features and APIs provided by CreativeEngine include:

• Scene Management: Create, load, save, and manipulate design scenes programmatically.
• Block Manipulation: Create and manage elements such as images, text, and shapes within the scene.
• Asset Management: Load and manage assets like images and SVGs from URLs or local sources.
• Variable Management: Define and manipulate variables for dynamic content within scenes.
• Event Handling: Subscribe to events such as block creation or selection changes for dynamic interaction.

API Overview#

CE.SDK’s APIs are organized into several categories, each addressing different aspects of scene and content management. The engine API is relevant if you want to programmatically manipulate images to create or modify them at scale.

Scene API:

• Creating and Loading Scenes:

  JavaScript

  engine.scene.create();
  engine.scene.loadFromURL(url);

• Zoom Control:

  JavaScript

  engine.scene.setZoomLevel(1.0);
  engine.scene.zoomToBlock(blockId);

Block API::

• Creating Blocks:

  JavaScript

  const block = engine.block.create('shapes/rectangle');

• Setting Properties:

  JavaScript

  engine.block.setColor(blockId, 'fill/color', { r: 1, g: 0, b: 0, a: 1 });
  engine.block.setString(blockId, 'text/content', 'Hello World');

• Querying Properties:

  JavaScript

  const color = engine.block.getColor(blockId, 'fill/color');
  const text = engine.block.getString(blockId, 'text/content');

Variable API:

• Managing Variables:

  JavaScript

  engine.variable.setString('myVariable', 'value');
  const value = engine.variable.getString('myVariable');

Asset API::

• Managing Assets:

  JavaScript

  engine.asset.add('image', 'https://example.com/image.png');

Event API::

• Subscribing to Events:

  JavaScript

  // Subscribe to scene changes
  engine.scene.onActiveChanged(() => {
    const newActiveScene = engine.scene.get();
  });

Basic Automation Example#

The following automation example shows how to turn an image block into a square format for a platform such as Instagram:

// Assuming you have an initialized engine and a selected block (which is an image block)

const newWidth = 1080; // Width in pixels
const newHeight = 1080; // Height in pixels

const imageBlockId = engine.block.findByType('image')[0];

engine.block.setWidth(imageBlockId, newWidth);
engine.block.setHeight(imageBlockId, newHeight);

engine.block.setContentFillMode(imageBlockId, 'Cover');

Customizing the CE.SDK Photo Editor#

CE.SDK provides extensive customization options, allowing you to tailor the UI and functionality to meet your specific needs. This can range from basic configuration settings to more advanced customizations involving callbacks and custom elements.

Basic Customizations#

• Configuration Object: Customize the editor’s appearance and functionality by passing a configuration object during initialization.

  JavaScript

  const config = {
    baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.18.0/assets',
    license: 'your-license-key',
    locale: 'en',
    theme: 'light'
  };

• Localization: Customize the language and labels used in the editor to support different locales.

  JavaScript

  const config = {
    i18n: {
      en: {
        variables: {
          my_custom_variable: {
            label: 'Custom Label'
          }
        }
      }
    }
  };

• Custom Asset Sources: Serve custom image or SVG assets from a remote URL.

UI Customization Options#

• Theme: Select from predefined themes like 'dark' or 'light'.

  JavaScript

  const config = {
    theme: 'dark'
  };

• UI Components: Enable or disable specific UI components as needed.

  JavaScript

  const config = {
    ui: {
      elements: {
        toolbar: true,
        inspector: false
      }
    }
  };

Advanced Customizations#

For deeper customization, explore the range of APIs available for extending the functionality of the photo editor. You can customize the order of components, add new UI elements, and even develop your own plugins to introduce new features.

Plugins#

For cases where encapsulating functionality for reuse is necessary, plugins provide an effective solution. Use our guide on building plugins to get started, or explore existing plugins like Background Removal and Vectorizer.

Framework Support#

CreativeEditor SDK’s photo editor is compatible with Vue.js and other JavaScript frameworks like React, Angular, Svelte, Blazor, Next.js, and TypeScript. It also integrates well with desktop and server-side technologies such as Electron, PHP, Laravel, and Rails.

500M+

video and photo creations are powered by IMG.LY every month