Export

Configuration

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'

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);
  });