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