Class: ReactUI

PhotoEditorSDK.UI~ ReactUI

The React UI

new ReactUI(options, provider)

ui/react-ui/ui.jsx, line 115

Creates an UI instance

Name Type Description
options Object
Name Type Default Description
license String

Your license
container DOMElement

The container that the UI should be rendered to
title String 'PhotoEditor SDK' optional
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?
crossOrigin String 'anonymous' optional

'anonymous', 'use-credentials' or 'none'
photoRoll Object optional
provider PhotoEditorSDK.UI.ReactUI.PhotoRoll.Provider

The class providing all data for the photo roll
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?
controlsOrder Array.<String> | Array.<Array> optional

The order in which the controls are displayed. Available are transform, 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.
forceCrop Array.<Object> optional

If true, the editor will lauch to the transform tool for cropping, before any other tool is allowed.
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}

ui/react-ui/ui.jsx, line 195

Deserializes the given data

Name Type Description
data Object
Returns:
Type Description
Promise

dispose()

ui/react-ui/ui.jsx, line 486

Disposes the UI

export(download){Promise}

ui/react-ui/ui.jsx, line 178

Exports an image

Name Type Description
download Boolean

= false
Returns:
Type Description
Promise

getAssetPath(asset, uiAsset, disableRetina){String}

ui/react-ui/ui.jsx, line 438

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}

ui/react-ui/ui.jsx, line 203

Returns the editor

Returns:
Type Description
PhotoEditorSDK.UI.ReactUI.Editor

getFontLoader(){FontLoader}

ui/react-ui/ui.jsx, line 471

Returns the font loader

Returns:
Type Description
FontLoader

getPreloader(){PhotoEditorSDK.Preloader}

ui/react-ui/ui.jsx, line 479

Returns the preloader

Returns:
Type Description
PhotoEditorSDK.Preloader

isReady(){Boolean}

ui/react-ui/ui.jsx, line 213

Returns true if the editor is ready for doing operations, e.g., serializing, deserializing and exporting.

Returns:
Type Description
Boolean

onReady(cb)

ui/react-ui/ui.jsx, line 223

Calls a callback when the editor is ready, or immeditially if it's already in a ready state.

Name Type Description
cb function

serialize(){Promise}

ui/react-ui/ui.jsx, line 186

Serializes the editor state

Returns:
Type Description
Promise

setImage(image)

ui/react-ui/ui.jsx, line 426

Sets the image to the given one

Name Type Description
image Image

translate(key, interpolationOptions){String}

ui/react-ui/ui.jsx, line 418

Returns the translation for key

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

Type Definitions

EventsObject

Events used by the UI

Properties:
Name Type Description
EXPORT String

Emitted when an image is exported from the editor
CLOSE String

Emitted when the editor is closed
OPERATION_CREATED String

Emitted when an Operation is created
OPERATION_UPDATED String

Emitted when an Operation is updated
OPERATION_REMOVED String

Emitted when an Operation is removed
EDITOR_READY String

Emitted when the editor has finished loading and is ready to be used
WINDOW_RESIZE String

Emitted when the window (not the editor) is resized
ZOOM_DONE String

Emitted when the zoom level has finished changing
HISTORY_UNDO String

Emitted after the last edit operation is undone
HISTORY_UPDATED String

Emitted when the edit history is updated with a new snapshot
HISTORY_BEFORE_UNDO String

Emitted before the last edit operation is undone
FEATURES_DISABLED String

Emitted when at least one editor feature has been disabled
FEATURES_ENABLED String

Emitted when editor features have been enabled
FEATURES_UPDATED String

Emitted when the available editor features have changed
TRANSFORM_REAPPLY_RATIO String

Emitted when the original transform ratio has been reapplied
COLORPICKER_OPEN String

Emitted when the color picker is opened

Events

controls:switched

ui/react-ui/ui.jsx, line 529

Controls switched event

Type:

export

ui/react-ui/ui.jsx, line 502

Export event

Type:
  • Image | String | Blob

history:undo

ui/react-ui/ui.jsx, line 523

History undo event

operation:created

ui/react-ui/ui.jsx, line 509

Operation created event

Type:
  • PhotoEditorSDK.Operation

operation:removed

ui/react-ui/ui.jsx, line 516

Operation removed event

Type:
  • PhotoEditorSDK.Operation