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