Print Design with Picsart Photo and Video Editor SDK

This section presents a hands-on example demonstrating how to configure the Picsart Photo and Video Editor SDK specifically for print design purposes. The provided code snippet guides you through setting up the editor with features tailored for print projects, such as selecting print sizes, configuring export settings, and customizing the user interface for printing needs.

In addition to this code example, here are some key aspects to consider for an effective print editor integration:

Understanding Export Settings: Familiarize yourself with the export settings, particularly for print-ready PDFs, which are crucial in a print-focused editor.
Customizing User Interface: Adapt the editor’s interface to cater to print design workflows. Pay attention to the layout and accessibility of printing tools within the editor.
Optimizing Template Designs: Ensure the templates provided in the editor are optimized for printing. This includes considering aspects like bleed areas, color profiles, and resolution.
Ensuring File Compatibility: Make sure the editor supports all relevant file formats for printing, such as high-resolution JPEGs, and PDFs.
Performance Considerations: Optimize the editor's performance for handling high-quality print files, ensuring fast processing and smooth user experience.
Accessibility and Ease of Use: Ensure the editor is intuitive and easy to navigate, allowing users of all skill levels to create print-ready designs efficiently.

By understanding and implementing these elements in conjunction with the provided code example, you can build a robust print editor using the Picsart Photo and Video Editor SDK. This integration will not only enhance your printing platform but also provide a seamless and efficient experience for your users.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Printing Example</title>
</head>

<body>
  <style>
    body {
      padding: 30px;
    }

    select {
      margin: 5px;
    }

    .open-button {
      display: none;
      top: 20px;
      margin: 15px 5px 5px 5px;
    }

    .container {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      pointer-events: none;
    }

    iframe {
      border: none;
      border-radius: 4px;
      box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.4);
      border-radius: 4px;
    }

    .wrap {
      margin-top: 15px;
    }
  </style>
  <div id="filtersContainer"></div>

  <!-- Open editor button will only be visible once all the options needed for it to be open are selected-->
  <button class="open-button" id="openButton">Open Editor</button>

  <!-- Container element where the editor will be loaded -->
  <div id="containerId" class="container"></div>

  <script src="https://sdk.picsart.io/cdn?v=X.Y.Z&key=sdk"></script>
  <script type="text/javascript">


    const PicsartInstance = new Picsart({
      propertyId: '',
      containerId: 'containerId', // The container/wrapper element ID of the editor
      apiKey: 'Your_API_KEY',
      mode: 'print',
      exportDPI: 150,
      exportFormats: ['print/pdf', 'replay'], // Exporting the 3 types available
      usePicsartInventory: true,
      exportSettings: {
        'print/pdf': {
          'pageInfo': true,
          'cropMark': true,
          'starTarget': true,
          'registrationMark': true,
          'colorBar': true,
          'tintBar': true,
          'emptyMargin': true,
        }
      },
      quality: 90, // for images only
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        tools: [
          'effects',
          'eraser',
          'duplicate',
          'adjust',
          'edit',
          'color',
          'gradient',
          'font',
          'border',
          'outline',
          'shadow',
          'crop',
          'flip_rotate',
          'position',
          'tool_removeBG'
        ],
        settingsWidgetOptions: ['shortcut', 'bleed'],
        hideCancelBtn: true, // This will hide the cancel button on the top right corner
        PPI: 72,
      },
      textSettings: {
        fontsFolderView: false,
      },
      categories: {
        templates: {},
        photos: {
          thumbnailHeader: false,
        },
        text: {
          stroke: false,
          singleAddText: false,
        },
        elements: {},
        background: {},
      }
    });

    // Content provider / Shapes
    PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });

    // Custom label for the "next button", default value is next
    PicsartInstance.provideLabels({
      nextButton: 'Export',
    });

    PicsartInstance.onExport((output) => {
      // Good practice to close the SDK after the onExport callback is called.
      PicsartInstance.close();
      console.log(output)
      if (output.data.previewPdfData) {
        // PDF example is used only.
        downloadFile(output.data.previewPdfData, 'preview_pdf.pdf');
      }
      if (output.data.pdfData) {
        // PDF example is used only.
        downloadFile(output.data.pdfData, 'pdf.pdf');
      }
      if (output.data.printData) {
        // PDF example is used only.
        downloadFile(output.data.printData, 'print_ready.pdf');
      }
      if (output.data.replayData) {
        const blob = new Blob([output.data.replayData], { type: 'application/zip' });
        downloadFile(blob, 'replayFile.replay');
      }
      if (output.data.imageData) {
        downloadFile(output.data.imageData, 'image.png');
      }
    });

    function downloadFile(blob, fileName) {
      const link = document.createElement('a');
      link.href = typeof blob === 'string' ? blob : URL.createObjectURL(blob);
      link.download = fileName;
      document.body.append(link);
      link.click();
      link.remove();
    };

    async function init() {
      PicsartInstance.open({
        measurement: 'millimeter',
        title: 'Print My Project'
      });
    }
    init();

  </script>
</body>