Export

Configuration#

PhotoEditorSDK.PhotoEditorSDKUI.init({
  license: "",
  container: "#editor",
  image: "https://cdn.img.ly/...",
  export: {
    filename: "photoeditorsdk-export",
    image: {
      exportType: ExportFormat.IMAGE,
      format: ImageFormat.PNG,
      quality: 0.9,
      enableDownload: true,
      transparent: true,
    },
  },
});

filename#

Determines the file name of the image that is saved on the users device.

enableDownload#

If enableDownload is set to false the image will not be automatically saved to the user device.

format#

It is possible to export the image in the PNG or JPEG format.

Possible values:#

• 'image/png'
• 'image/jpeg'

transparent#

If transparent is set to false, it will disable the transparency of the exported image. This value can only be used if format is set to 'image/png'. Default is true.

exportType#

Determines in which data format the image should be returned from the export function or event.

Possible values:#

• 'data-url': Returns the image data as a base64 encoded string. e.g.: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...
• 'image': Returns the image as a HTML image element.
• 'blob': Returns a Blob object which can be read as text or binary data.

quality#

The quality value can only be used if the format is set to image/jpeg and defines the image quality between 0.1 and 1.

Export Event#

It is possible to listen for the UIEvent.EXPORT/'export' event on the returned editor instance. The event will be called every time the user clicks on the export button or the export function is used.

Example#

import { PhotoEditorSDKUI, UIEvent, ImageFormat, ExportFormat } from 'photoeditorsdk';

PhotoEditorSDKUI.init({
  container: "#editor",
  image: "",
  license: "",
  export: {
    image: {
      enableDownload: false,
      format: ImageFormat.JPEG,
      exportType: ExportFormat.DATA_URL,
    },
  },
}).then((editor) => {
  editor.on(UIEvent.EXPORT, async (image) => {
    // todo: handle exported image here
  );
 });

Export function#

The export function is an alternative to the export event and can be called at any time. By default the image data will be returned with the export options from the configuration but you can override these by providing arguments to the function.

Example#

editor
  .export({
    format: "image/jpeg", // `image/png` or `image/jpeg`
    exportType: "data-url", // `image`, `data-url` or `blob`
    quality: 0.9, // 0.1 - 1.0, defines the quality of jpeg images
    enableDownload: false, // boolean, enable or disable the automatic file download
    preventExportEvent: true, // boolean, enable or disable the UIEvent.EXPORT which is called on every export
  })
  .then((dataURL) => {
    // the data can be sent to a server or handled otherwise from here
  })
  .catch((err) => {
    console.err("An error has occured while exporting ", err);
  });