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.
EventDetails
Name:UIEvent.ERROR_WEBGL_CONTEXT_LOST / 'errorWebGLContextLost'
Yields:none
Description:Fires if the WebGL context experiences some kind of issue and crashes in the background.

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