Configuration
You can easily configure the editor to disable specific tools, hide buttons etc. by adding properties
to the options
object passed to the UI:
license
String - Your license (Required)container
DOMElement - The element the editor should be rendered to.language
String - The UI language. Defaults toen
. Available areen
andde
.logLevel
String -trace
,info
,warn
,error
orlog
. Defaults towarn
.responsive
Boolean - Specifies whether the editor should react to window resizing.preloader
Boolean - Enables the preloader. Defaults totrue
.-
crossOrigin
- Sets the global crossOrigin loading mode. Values: ‘anonymous’, ‘use-credentials’ or ‘none’ assets
ObjectbaseUrl
String - The base URL for all assets. Should be the absolute path to yourassets
directory. Defaults toassets
resolver
Function - A function that gets called for every asset. Can turn an asset path into another path. Useful for stuff like Rails’ asset pipeline.
editor
Objectimage
Image - The image that should be loaded and displayed initially.pixelRatio
Number - If none is given, the SDK automatically detects the current device’s pixel ratio.preferredRenderer
String - Defaults towebgl
. Available arewebgl
andcanvas
.forceCrop
- If true, the editor will launch to the transform tool for cropping, before any other tool is allowed.transparent
Boolean - If true, allows replacing the background color of the editor with a color defined by theclearColor
optionsclearColor
Array, String or PhotoEditorSDK.Color - The color used to clear the canvas whentransparent
is set to truedisplayCloseButton
Boolean - Should a close button be displayed? If set totrue
, theDesktopUI
instance will emit aclose
event when the button is clickeddisplayResizeMessage
Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults totrue
.maxMegaPixels
Object - Specifies the maximum amount of megapixels per device typedesktop
Number - Defaults to 10mobile
Number - Defaults to 5
enableDrag
Boolean - Should the image be draggable? Defaults totrue
.enableZoom
Boolean - Should the image be zoomable? Defaults totrue
.enablePositionSnapping
- Should snapping be enabled when positioning sprites? Defaults totrue
enableRotationSnapping
- Should snapping be enabled when rotating sprites? Defaults totrue
enableExport
Boolean - Should the export button be displayed? Defaults totrue
. If set tofalse
, export is still available via the API.smoothDownscaling
Boolean - Toggles smooth downscaling of images and sprites. Might have a negative impact on performance, therefor default isfalse
.tools
Array - The enabled tools. Available are:transform
,filter
,adjustments
,focus
,text
,textdesign
,sticker
,brush
,frame
andoverlay
defaultControl
String - The tool that is initially loaded. Defaults tofilter
.controlsOrder
Array - The order in which the controls are displayed. Available arelibrary
,transform
,filter
,adjustments
,focus
,text
,textdesign
,sticker
,brush
,frame
andoverlay
. Can be grouped in arrays which will be displayed with separators.operationsOrder
Array - The order in which operations are added to the stack. Changing this may have a negative impact on performance.controlsOptions
Object - Objects passed to the controls. See the documentation for available controls and their options.snappingOptions
Object - Options that control the snapping behaviour of sprites.position
Object - Options that control the positional snapping of spritesthreshold
Number - At which threshold should sprites snap to the canvas snapping guides? (value in pixels). Defaults to 20padding
Object - Defines the inset between the canvas frame and the corresponding snapping guides. The values are specified relative to the smaller side of the image. Settingleft
,right
,top
andbottom
to 0 allows sprites to snap to the edges of the canvas.left
Number - Defaults to 0.1right
Number - Defaults to 0.1top
Number - Defaults to 0.1bottom
Number - Defaults to 0.1
rotation
Object - Options that control the rotational snapping of spritesangles
Array - Angles to snap to while rotating a sprite. Defaults to[0, 45, 90, 135, 180, 225, 270, 315]
threshold
Number - At which threshold should the sprites snap to the next rotation snap point (value in pixels)
export
Objectformat
String - The mime type of the exported image. Defaults toimage/png
. Available formats vary by browser.type
PhotoEditorSDK.RenderType - Specifies the export type (image or data url)download
Boolean - Should a download dialog be displayed on export?fileBasename
String - The base file name, defaults tophotoeditorsdk-export
quality
Number - JPEG quality, defaults to 0.8
license
String - Your license (Required)container
DOMElement - The element the editor should be rendered to.title
String - The text in the title barlanguage
String - The UI language. Defaults toen
. Available areen
andde
.logLevel
String -trace
,info
,warn
,error
orlog
. Defaults towarn
.enableUpload
Boolean - Enables photo upload. Defaults totrue
.enableWebcam
Boolean - Enables webcam support. Defaults totrue
on desktop devices,false
on mobile devices (mobile devices handle camera upload via the default upload functionality)showCloseButton
Boolean - Should the close button be displayed? Defaults tofalse
. If set to true, the editor will emit aclose
event when the user clicks the close button.showHeader
Boolean - Should the header be displayed? Defaults to true. Can only be changed by licensed developers.showTopBar
Boolean - Should the top bar (new / zoom / undo / export) be displayed? Defaults totrue
.preloader
Boolean - Enables the preloader. Defaults totrue
.watermarkImage
Image - An image that should be placed on top as a watermark. Defaults toundefined
.-
crossOrigin
- Sets the global crossOrigin loading mode. Values: ‘anonymous’, ‘use-credentials’ or ‘none’ photoRoll
Objectprovider
PhotoEditorSDK.UI.ReactUI.PhotoRoll.Provider - The class providing all data for the photo roll.
editor
Objectimage
Image - The image that should be loaded and displayed initially.displayResizeMessage
Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults totrue
.preferredRenderer
String - Defaults towebgl
. Available arewebgl
andcanvas
.forceCrop
- If true, the editor will launch to the transform tool for cropping, before any other tool is allowed.pixelRatio
Number - If none is given, the SDK automatically detects the current device’s pixel ratio.responsive
Boolean - Should the editor re-render on window resize? Defaults tofalse
.enableDrag
Boolean - Should the image be draggable? Defaults totrue
.enableZoom
Boolean - Should the image be zoomable? Defaults totrue
.smoothDownscaling
Boolean - Toggles smooth downscaling of images and sprites. Might have a negative impact on performance, therefor default isfalse
.smoothUpscaling
Boolean - Toggles smooth upscalingtools
Array - The enabled tools. Available are:transform
,rotation
,flip
,filter
,brightness
,saturation
,gamma
,contrast
,clarity
,exposure
,shadows
,highlights
,text
,sticker
,brush
,selective-blur
,radial-focus
,mirrored-focus
,frame
controlsOrder
Array - The order in which the controls are displayed. Available aretransform
,filter
,adjustments
,text
,sticker
,brush
,focus
,frame
. Can be grouped in arrays which will be displayed with separators.operationsOrder
Array - The order in which operations are added to the stack. Changing this may have a negative impact on performance.controlsOptions
Object - Objects passed to the controls. See the documentation for available controls and their options.maxMegaPixels
Object - Specifies the maximum amount of megapixels per device typedesktop
Number - Defaults to 10mobile
Number - Defaults to 5
export
ObjectshowButton
Boolean - Should the export button be visible? Defaults totrue
.format
String - The mime type of the exported image. Defaults toimage/png
. Available formats vary by browser.type
PhotoEditorSDK.RenderType - Specifies the export type (image or data url)download
Boolean - Should a download dialog be displayed on export?
assets
ObjectbaseUrl
String - The base URL for all assets. Should be the absolute path to yourassets
directory. Defaults toassets
resolver
Function - A function that gets called for every asset. Can turn an asset path into another path. Useful for stuff like Rails’ asset pipeline.