Class: ReactUI

PhotoEditorSDK.UI. ReactUI

The React UI

new PhotoEditorSDK.UI.ReactUI(options, provider)

react-ui/ui.js, line 40

Creates an UI instance

Name Type Default Description
options Object
Name Type Default Description
apiKey String

Your API key

container DOMElement

The container that the UI should be rendered to

title String 'PhotoEditor SDK' optional

Only available for licensees

language String 'en' optional

Currently en and de are supported

logLevel String optional

trace, info, warn, error or log

responsive Boolean false optional

Should the editor re-render on window resize?

enableUpload Boolean true optional

Should the user be able to upload their own photos?

enableWebcam Boolean true optional

Enables webcam support. Disabled on mobile devices.

showCloseButton Boolean false optional

Should the close button be displayed?

showHeader Boolean true optional

Should the header (with title text) be displayed? Should only be set to false by licensees.

showTopBar Boolean true optional

Should the top bar (new / zoom / undo / export) be displayed?

photoRoll Object optional
provider PhotoEditorSDK.UI.ReactUI.PhotoRoll.Provider

The class providing all data for the photo roll

options.preloader Boolean true optional

Enables the preloader

options.editor Object optional
Name Type Default Description
image Image optional

The image that the user can edit

watermarkImage Image optional

An image that should be placed on top as a watermark

preferredRenderer String 'webgl' optional

webgl or canvas

pixelRatio Number 1 optional

If none is given, PhotoEditorSDK automatically detects the current device's pixel ratio

enableDrag Boolean true optional

Should dragging the canvas be enabled?

enableZoom Boolean true optional

Should zooming be enabled?

smoothDownscaling Boolean false optional

Toggles smooth downscaling

smoothUpscaling Boolean false optional

Toggles smooth upscaling

displayResizeMessage Boolean true optional

Should a message be displayed when the image has been scaled down for performance?

tools Array.<String> optional

The enabled tools. Available are: crop, rotation, flip, filter, brightness, saturation, gamma, contrast, clarity, exposure, shadows, highlights, text, sticker, brush, selective-blur, radial-focus, linear-focus, frame and frame

controlsOrder Array.<String> | Array.<Array> optional

The order in which the controls are displayed. Available are crop, filter, adjustments, text, sticker, brush, focus, frame. Can be grouped in arrays which will be displayed with separators.

operationsOrder Array.<String> optional

The order in which operations are added to the stack. Changing this may affect the performance.

controlsOptions Object optional

Options that are passed to specific controls. See the documentation for each control to learn more about available values.

forceControls Array.<Object> optional

An array of objects specifying the controls the user needs to use before being able to use the actual editor.

maxMegaPixels Object optional

Maximum amount of megapixels per device type

Name Type Default Description
desktop Number 10 optional
mobile Number 5 optional
export Object optional
Name Type Default Description
showButton Boolean true optional

Should the export button be displayed?

format String 'image/png' optional

The export format. Available formats

type PhotoEditorSDK.RenderType optional

The export type (image or data url)

download Boolean optional

Should the result be presented as a download?

fileBasename String 'photoeditorsdk-export' optional

The basename of the exported file (file extension will be added automatically)

quality Number 0.8 optional

The export quality (0...1, only supported for JPG images)

options.assets Object optional
Name Type Default Description
baseUrl String '/assets' optional

Path that is prepended to all asset paths

resolver function optional

A function resolving a path to another path.

Extends

Classes

Control
Editor
ReactComponent

Namespaces

Controls

Members

identifierString

A unique string that represents this UI

Methods

deserialize(data){Promise}

react-ui/ui.js, line 185

Deserializes the given data

Name Type Description
data Object
Returns:
Type Description
Promise

dispose()

react-ui/ui.js, line 440

Disposes the UI

export(download){Promise}

react-ui/ui.js, line 168

Exports an image

Name Type Description
download Boolean

= false

Returns:
Type Description
Promise

getAssetPath(asset, uiAsset, disableRetina){String}

react-ui/ui.js, line 400

Returns the resolved asset path for the given asset name

Name Type Default Description
asset String
uiAsset Boolean false

= false

disableRetina Boolean false

= false

Returns:
Type Description
String

getEditor(){PhotoEditorSDK.UI.ReactUI.Editor}

react-ui/ui.js, line 193

Returns the editor

Returns:
Type Description
PhotoEditorSDK.UI.ReactUI.Editor

getFontLoader(){FontLoader}

react-ui/ui.js, line 433

Returns the font loader

Returns:
Type Description
FontLoader

serialize(){Promise}

react-ui/ui.js, line 176

Serializes the editor state

Returns:
Type Description
Promise

setImage(image)

react-ui/ui.js, line 388

Sets the image to the given one

Name Type Description
image Image

translate(key, interpolationOptions){String}

react-ui/ui.js, line 380

Returns the translation for key

Name Type Description
key String
interpolationOptions Object optional
Returns:
Type Description
String

Events

controls:switched

react-ui/ui.js, line 483

Controls switched event

Type:

export

react-ui/ui.js, line 456

Export event

Type:
  • Image | String | Blob

history:undo

react-ui/ui.js, line 477

History undo event

operation:created

react-ui/ui.js, line 463

Operation created event

Type:

operation:removed

react-ui/ui.js, line 470

Operation removed event

Type: