Basic Configuration Settings of PhotoEditor SDK

Basic Configuration#

The PE.SDK comes with a set of basic configuration parameters that let you influence its look & feel.

license#

The PhotoEditor SDK license. If no license (or an invalid license) is provided the PE.SDK will render a watermark over the preview and export output. Refer to the pricing plans for more information.

container#

Defines the HTML element the editor will be injected into.

image#

Defines the image that should be displayed once the editor is loaded. This can be a data-url, HTMLImageElement or a file path that is relative to the assets directory.

If image is set to undefined the editor will initialise with a blank canvas and the user is able to select an image from the Library or Custom tool. All other tools will be disabled until an image is loaded.

assetBaseUrl#

Defines the root for all assets that are used by the PE.SDK. This can be an URL to a CDN or an absolute path to a local folder which is served by the webserver.

assetResolver.item#

Modify the path to a loaded asset that is relative to the assets directory.

(item: string, category: string) => string

assetResolver.path#

Modify the absolute path of a loaded asset.

(fullPath: string, category: string, item?: string) => string

language#

Defines the current language in the user interface. The PE.SDK is shipped with locales for English (en) and German (de), but any other language is possible. See Localization for an in-depth explaination of how to add new languages or modify the predefined translations.

layout#

Defines the current layout of the user interface. The PE.SDK is shipped with an AdvancedUI (advanced) and BasicUI (basic) layout. See UI for more information on their differences.

theme#

Set the active theme. The PE.SDK includes predefined dark or light themes but is also highly customizable to match any style. See Theme for an in-depth explanation of how to create your own theme.

order#

Defines if the ToolBar in the AdvancedUI is position on the left side (default) or on the right side (reverse).

mainCanvasActions#

Defines the available buttons of the MainCanvasActionBar and their order. The editor will leave the position empty if undefined is provided.

Available options are undo, redo, export, close, and undefined.

enableZoom#

Defines if the user is able to use the zoom feature.

scaleImageToFit#

Defines if the image is scaled to fit the available canvas area.

Set this value to false to display an image at 100% if it is smaller than the available canvas area. Bigger images will still be scaled down to fit the canvas area.

restrictZoomOutToDefault#

Defines if it should be possible to select a smaller zoom level than the default/initial one of the image.

tools#

Defines which tools are available and their order. The tools can be grouped in arrays which will be display a separator between the next group.

Available are: transform, filter, adjustment, focus, text, textdesign, sticker, brush, frame and overlay.

defaultTool#

Defines the tool that is initially loaded. Defaults to filter in the AdvancedUI or null in the BasicUI.

displayResizeWarning#

Defines if a message is displayed when the image has been scaled down for performance reasons.

displayCloseWarning#

Defines if a message is displayed when PE.SDK is exited with unsaved changes.

displayDiscardChangesWarning#

Defines if a message is displayed when a new image is loaded and changes were made to the image.
If this is set to false, changes will not be discarded and instead will be applied to the new image. The EditorAPI.reset function can be used to discard changes after loading a new image.

displayToolControlBarTitle#

Defines if the title of the tool is displayed in of the ToolControlBar.