Skip to main content
You're viewing documentation for a previous version of this software.Switch to the latest stable version
PESDK/Web/Introduction

Configuration

The PhotoEditor SDK for HTML5 can easily be tailored to meet your business needs. Learn how to swiftly create the editor your use-case requires.

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 to `en`. Available are `en` and `de`.
- `logLevel` String - `trace`, `info`, `warn`, `error` or `log`. Defaults to `warn`.
- `responsive` Boolean - Specifies whether the editor should react to window resizing.
- `preloader` Boolean - Enables the preloader. Defaults to `true`.
- `crossOrigin` - Sets the global crossOrigin loading mode. Values: 'anonymous', 'use-credentials' or 'none'
- `assets` Object
- `baseUrl` String - The base URL for all assets. Should be the absolute path to your `assets` directory. Defaults to `assets`
- `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` Object
_ `image` 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 to `webgl`. Available are `webgl` and `canvas`.
_ `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 the `clearColor` options
_ `clearColor` Array, String or PhotoEditorSDK.Color - The color used to clear the canvas when `transparent` is set to true
_ `displayCloseButton` Boolean - Should a close button be displayed? If set to `true`, the `DesktopUI` instance will emit a `close` event when the button is clicked
_ `displayResizeMessage` Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults to `true`.
_ `maxMegaPixels` Object - Specifies the maximum amount of megapixels per device type
_ `desktop` Number - Defaults to 10
_ `mobile` Number - Defaults to 5
_ `enableDrag` Boolean - Should the image be draggable? Defaults to `true`.
_ `enableZoom` Boolean - Should the image be zoomable? Defaults to `true`.
_ `enablePositionSnapping` - Should snapping be enabled when positioning sprites? Defaults to `true`
_ `enableRotationSnapping` - Should snapping be enabled when rotating sprites? Defaults to `true`
_ `enableExport` Boolean - Should the export button be displayed? Defaults to `true`. If set to `false`, 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 is `false`.
_ `tools` Array - The enabled tools. Available are: `transform`, `filter`, `adjustments`, `focus`, `text`, `textdesign`, `sticker`, `brush`, `frame` and `overlay`
_ `defaultControl` String - The tool that is initially loaded. Defaults to `filter`.
_ `controlsOrder` Array - The order in which the controls are displayed. Available are `library`, `transform`, `filter`, `adjustments`, `focus`, `text`, `textdesign`, `sticker`, `brush`, `frame` and `overlay`. 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](https://docs.photoeditorsdk.com/apidocs/web/v4/PhotoEditorSDK.UI.DesktopUI.Controls.html) 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 sprites
_ `threshold` Number - At which threshold should sprites snap to the canvas snapping guides? (value in pixels). Defaults to 20
_ `padding` 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. Setting `left`, `right`, `top` and `bottom` to 0 allows sprites to snap to the edges of the canvas.
_ `left` Number - Defaults to 0.1
_ `right` Number - Defaults to 0.1
_ `top` Number - Defaults to 0.1
_ `bottom` Number - Defaults to 0.1
_ `rotation` Object - Options that control the rotational snapping of sprites
_ `angles` 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` Object
* `format` String - The mime type of the exported image. Defaults to `image/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 to `photoeditorsdk-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 bar
- `language` String - The UI language. Defaults to `en`. Available are `en` and `de`.
- `logLevel` String - `trace`, `info`, `warn`, `error` or `log`. Defaults to `warn`.
- `enableUpload` Boolean - Enables photo upload. Defaults to `true`.
- `enableWebcam` Boolean - Enables webcam support. Defaults to `true` 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 to `false`. If set to
true, the editor will emit a `close` 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 to `true`.
- `preloader` Boolean - Enables the preloader. Defaults to `true`.
- `watermarkImage` Image - An image that should be placed on top as a watermark. Defaults to `undefined`.
- `crossOrigin` - Sets the global crossOrigin loading mode. Values: 'anonymous', 'use-credentials' or 'none'
- `photoRoll` Object
- `provider` PhotoEditorSDK.UI.ReactUI.PhotoRoll.Provider - The class providing all data for the photo roll.
- `editor` Object
- `image` 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 to `true`.
- `preferredRenderer` String - Defaults to `webgl`. Available are `webgl` and `canvas`.
- `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 to `false`.
- `enableDrag` Boolean - Should the image be draggable? Defaults to `true`.
- `enableZoom` Boolean - Should the image be zoomable? Defaults to `true`.
- `smoothDownscaling` Boolean - Toggles smooth downscaling of images and sprites. Might have a negative impact on performance, therefor default is `false`.
- `smoothUpscaling` Boolean - Toggles smooth upscaling
- `tools` 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 are `transform`, `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](https://docs.photoeditorsdk.com/apidocs/web/v4/PhotoEditorSDK.UI.DesktopUI.Controls.html) for available controls and their options.
- `maxMegaPixels` Object - Specifies the maximum amount of megapixels per device type
- `desktop` Number - Defaults to 10
- `mobile` Number - Defaults to 5
- `export` Object
- `showButton` Boolean - Should the export button be visible? Defaults to `true`.
- `format` String - The mime type of the exported image. Defaults to `image/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` Object
- `baseUrl` String - The base URL for all assets. Should be the absolute path to your `assets` directory. Defaults to `assets`
- `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.