Print Design with Picsart Create Editor

The following example demonstrates the versatile capabilities of the Picsart Create Editor, showcasing its configuration for use as a powerful photo and image editor specifically tailored for print design.

Suggest Edits
<!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>

Updated 4 days ago