API Docs

Events

Event Types

Event Details
Name: UIEvent.EXPORT / 'export'
Yields: the image data (String/HTMLImageElement/Blob)
Description: Fires when the user clicks on the Export button or EditorApi.export is called. The event will return the image data in the format that is configured in export.image.exportType.
Event Details
Name: UIEvent.CLOSE / 'close'
Yields: none
Description: Fires when the user clicks on the Close button or EditorApi.close is called.
Event Details
Name: UIEvent.ERROR_IMAGE_LOADING / 'errorImageLoading'
Yields: the error (Error)
Description: Fires if there was an issue loading the image configured in image. The event will return an error with more information regarding the issue.
Event Details
Name: UIEvent.IMAGE_LOADED / 'imageLoaded'
Yields: none
Description: Fires if the user selected a new image in the library.
Event Details
Name: UIEvent.STICKER_UPLOAD_ADD / 'stickerUploadAdd'
Yields: the uploaded stickers (Array)
Description: Fires if the user uploaded one or more custom stickers. Returns an array with the id, image and original File of the sticker.
Event Details
Name: UIEvent.TOOL_ENTER / 'toolEnter'
Yields: the selected tool (Tool)
Description: Fires for the default tool and if the active tool was changed. Returns the identifier of the new tool.
Event Details
Name: UIEvent.HISTORY_CHANGED / 'historyChanged'
Yields: none
Description: Fires when an entry was added to the history.
Event Details
Name: UIEvent.EDITOR_READY / 'editorReady'
Yields: none
Description: Fires once the editor was initialised completely and the user is able to edit an image.

Examples

Exporting an image

import {
  UIEvent,
  PhotoEditorSDKUI,
  ImageFormat,
  ExportFormat,
} from "photoeditorsdk";

const editor = PhotoEditorSDKUI.init({
  image: "",
  license: "",
  container: "#editor",
  export: {
    image: {
      enableDownload: false, // will prevent the file download on the user side
      format: ImageFormat.JPEG,
      exportType: ExportFormat.DATA_URL,
    },
  },
}).then((editor) => {
  editor.on(UIEvent.EXPORT, (image) => {
    // handle the image here
  });
});

Tracking tool usage

It is possible to track which tools are used the most by the by listening for the TOOL_ENTER event.

import { UIEvent, PhotoEditorSDKUI } from "photoeditorsdk";

PhotoEditorSDKUI.init({
  image: "",
  license: "",
  container: "#editor",
}).then((editor) => {
  editor.on(UIEvent.TOOL_ENTER, (tool) => {
    // send the tool information to your analytics tool
  });
});

Save custom sticker to your server

The STICKER_UPLOAD_ADD event can be used to restore the custom user stickers the next time they open the editor. The event will return the sticker files which can be stored on a server. When a user opens the editor again you will need to add the stickers to the configuration.

this.config = {
  license: "",
  container: ".editor",
  image: "",
  sticker: {
    categories: [
      {
        identifier: "imgly_sticker_custom",
        name: "", // fallback if the language file does not contain a name
        thumbnailURI: "", // the path to the category thumbnail
        items: [
          // load the previous custom sticker from the server and add them here
        ],
      },
    ],
  },
  custom: {
    languages: {
      en: {
        sticker: {
          categories: {
            imgly_sticker_custom: "", // the displayed name for the category
          },
        },
      },
    },
  },
};

SDK.PhotoEditorSDKUI.init(this.config).then((editor) => {
  editor.on(SDK.UIEvent.STICKER_UPLOADED, (sticker) => {
    // upload sticker to server to restore the next time
  });
});