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
  });
});