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.