Skip to main content
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#

EventDetails
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.
EventDetails
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.
EventDetails
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.
EventDetails
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.
EventDetails
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.
EventDetails
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.
EventDetails
Event
Name:
Details
UIEvent.HISTORY_CHANGED / 'historyChanged'
Event
Yields:
Details
none
Event
Description:
Details
Fires when an entry was added to the history.
EventDetails
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.
EventDetails
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.

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