Skip to main content

Export

By default, PhotoEditor SDK for Web exports to your user's device. Learn how to disable the automatic download and export to a server instead.

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#

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