Export made easy

The export method can be called through the button located in the top-right corner of the Picsart Create Editor's navigation bar. It serves as the "Next" button, and its label can be customized.

Export from outside

You can also initiate project export from outside the editor's scope. This is particularly useful when the top navigation bar is disabled.

PicsartInstance.export();

Both options mentioned above trigger the execution of the onExport callback function, which sends the export data. More details about this can be found below.

👍

That's it !

Easy peasy.

onExport

Now that you have set up the editor, and filled in the list of templates, text presets, and shapes, users can fully utilize the editor's capabilities and make their edits. When it's time to export the result, you can handle the output by either configuring a callback during Picsart Create Editor initialization or separately, as shown in the example below:

PicsartInstance.onExport(

    (result) => {

    if (result.data.imageData) {
        const photo = output.data.imageData, 'image.png'
    }

    if (result.data.videoData) {
       const taskId = result.data.videoData.taskId;
    }
    
    if (result.data.replayData) {
       const replay = result.data.replayData;
    }
    
    if (result.data.printData) {
       const printPDF = result.data.printData;
    }

    if (result.data.previewPdfData) {
       const printPDF = result.data.previewPdfData;
    }
    
     if (result.done === undefined || result.done >= 100) {
       PicsartInstance.close();
    }

});

The onExport callback is triggered once all the configured exports are ready. The result of each export type is stored within its respective data object, as demonstrated in the example above.

Export Parameters

Below is a comprehensive list of parameters that can be used to customize the export process.

NameTypeDescriptionDefault
dataObjectThis object contains the export data of the saved work in replay format (video not supported yet), the exported PDF data, and the exported image data. The actual value of the data may vary depending on the chosen export format (buffer, base64, blob).data.imageData = (blob)
videoDataObjectContains the data of the exported video, including the taskId, which is a unique ID used to request the video after it is created.empty
appliedTextsArrayAn array of texts that were added during the editing process.[]
appliedTemplateIdStringThe ID of the template used in the current editing session.empty
doneNumberThis parameter is only included when async export is set to true, it returns the percentage of export done based on the amount of export files configured to be exported, once it reached 100 the Editor is good to get closed. If async is set to false (default) done parameter will be undefined.empty

Here's an example of how the onExport method can be implemented, along with all the possible results:

PicsartInstance.onExport(

    (result) => {

      if (result.data.imageData) {
           const photo = output.data.imageData;
      }

      if (result.videoData) {
         const jobID = result.videoData.taskId;
      }

      if (result.data.replayData) {
         const replay = result.data.replayData;
      }

      if (result.data.printData) {
         const printPDF = result.data.printData;
      }

      if (result.data.previewPdfData) {
         const printPDF = result.data.previewPdfData;
      }
	}
);