Skip to main content

Events

Understanding how users engage with a product is critical to every business. Learn how to track your user's interactions with PhotoEditor SDK for Web.

Event Types#

EventDetails
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.
EventDetails
Name:UIEvent.CLOSE / 'close'
Yields:none
Description:Fires when the user clicks on the Close button or EditorApi.close is called.
EventDetails
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.
EventDetails
Name:UIEvent.IMAGE_LOADED / 'imageLoaded'
Yields:none
Description:Fires if the user selected a new image in the library.
EventDetails
Name:UIEvent.STICKER_UPLOAD_ADD / 'stickerUploadAdd'
Yields:the uploaded stickers (Array<UploadedSticker>)
Description:Fires if the user uploaded one or more custom stickers. Returns an array with the id, image and original File of the sticker.
EventDetails
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.
EventDetails
Name:UIEvent.HISTORY_CHANGED / 'historyChanged'
Yields:none
Description:Fires when an entry was added to the history.
EventDetails
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
  });
});