Docs
v4
API Docs

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 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.
  • image Image - The image that the user can edit. Defaults to undefined.
  • displayResizeMessage Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults to true.

  • 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.
    • preferredRenderer String - Defaults to webgl. Available are webgl and canvas.
    • 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: crop, filter, brightness, saturation, contrast, gamma, clarity, exposure, shadows, highlights, text, sticker, brush, radial-focus, linear-focus, border and frame
    • controlsOrder Array - The order in which the controls are displayed. Available are crop, 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 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.