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:
apiKey
String - Your API key (Required)container
DOMElement - The element the editor should be rendered to.title
String - The text in the title bar. Can only be changed by licensed developers.language
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
.image
Image - The image that the user can edit. Defaults toundefined
.-
displayResizeMessage
Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults totrue
. 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.preferredRenderer
String - Defaults towebgl
. Available arewebgl
andcanvas
.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:crop
,filter
,brightness
,saturation
,contrast
,gamma
,clarity
,exposure
,shadows
,highlights
,text
,sticker
,brush
,radial-focus
,linear-focus
,border
andframe
controlsOrder
Array - The order in which the controls are displayed. Available arecrop
,orientation
,filter
,adjustments
,text
,sticker
,brush
,focus
,selective-blur
,border
. 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.