PESDK/Web/Concepts

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#

Event	Details
Event Name:	Details `UIEvent.EXPORT` / `'export'`
Event Yields:	Details the image data (String/HTMLImageElement/Blob)
Event Description:	Details 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
Event Name:	Details `UIEvent.CLOSE` / `'close'`
Event Yields:	Details none
Event Description:	Details Fires when the user clicks on the `Close` button or `EditorApi.close` is called.

Event	Details
Event Name:	Details `UIEvent.ERROR_IMAGE_LOADING` / `'errorImageLoading'`
Event Yields:	Details the error (Error)
Event Description:	Details 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
Event Name:	Details `UIEvent.IMAGE_LOAD` / `'imageLoad'`
Event Yields:	Details none
Event Description:	Details Fires if the user selected a new image in the library.

Event	Details
Event Name:	Details `UIEvent.STICKER_UPLOAD_ADD` / `'stickerUploadAdd'`
Event Yields:	Details the uploaded stickers (`Array<UploadedSticker>`)
Event Description:	Details 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
Event Name:	Details `UIEvent.TOOL_ENTER` / `'toolEnter'`
Event Yields:	Details the selected tool (Tool)
Event Description:	Details Fires for the default tool and if the active tool was changed. Returns the identifier of the new tool.

Event	Details
Event Name:	Details `UIEvent.HISTORY_CHANGED` / `'historyChanged'`
Event Yields:	Details none
Event Description:	Details Fires when an entry was added to the history.

Event	Details
Event Name:	Details `UIEvent.EDITOR_READY` / `'editorReady'`
Event Yields:	Details none
Event Description:	Details Fires once the editor was initialised completely and the user is able to edit an image.

Event	Details
Event Name:	Details `UIEvent.ERROR_WEBGL_CONTEXT_LOST` / `'errorWebGLContextLost'`
Event Yields:	Details none
Event Description:	Details Fires if the WebGL context experiences some kind of issue and crashes in the background.

Event	Details
Event Name:	Details `UIEvent.CROP_DIMENSIONS_CHANGE` / `'cropDimensionsChange'`
Event Yields:	Details the width and height of the cropped area (`Size`)
Event Description:	Details Fires if the user changes the width or height of the crop area

Examples#

Exporting an image#

JavaScript


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.

JavaScript


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.

JavaScript


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