Photo Editing with Picsart Photo and Video Editor SDK

In this section, we offer a hands-on example demonstrating how to configure the Picsart Photo and Video Editor SDK for photo editing. This code snippet is designed to guide you through the process of integrating the editor into your platform, providing a comprehensive approach to enhancing your photo editing capabilities.

In addition to the code example, consider these key aspects to maximize the effectiveness of your integration:

Customization of User Interface: The code allows you to tailor the editor's look and feel, aligning it with your brand's visual identity. Pay attention to the branding object where colors and themes are defined.
Selection of Tools and Features: Notice how the features and categories objects are used to specify the tools available in the editor. You can choose to include effects, erasers, cropping tools, and more based on your project's requirements.
Enhancing Export Functionality: The onExport callback function is critical for handling the output of the editing process. The example demonstrates how to manage the export of images and replay data, which is essential for a seamless user experience.
Responsive Design Considerations: While integrating the editor, ensure that it is responsive and provides a consistent experience across various devices and screen sizes.
Optimizing Performance: The example uses external resources like fonts and shapes. Ensure that these resources are optimized for performance to avoid slowing down the editor.
Accessibility and User Experience: Always keep in mind the end-user experience. The intuitive setup, clear labeling, and easy navigation in the editor are crucial for user engagement and satisfaction.

This code example, along with these additional considerations, provides a solid foundation for integrating and customizing the Picsart Photo and Video Editor SDK for photo editing. By understanding and adapting these elements, you can build a powerful photo editing tool tailored to your platform's specific needs.

<!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>Photo Example</title>
</head>

<body>
  <style>
    body {
      padding: 100px;
      font-family: Helvetica, Arial, sans-serif;
    }

    .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;
    }
  </style>
  <div id="containerId" class="container"></div>
  <script src="https://sdk.picsart.io/cdn?v=X.Y.Z&key=sdk"></script>
  <script>

    const downloadFile = (blob, fileName) => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      document.body.append(link);
      link.click();
      link.remove();
    };
		const customFonts = [
      {
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("https://fonts.gstatic.com/s/barriecito/v17/WWXXlj-CbBOSLY2QTuY_Gd0oYibNwMR2ng.woff2") format("woff2")',
        unicodeRange: 'U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB',
      },
      {
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("https://fonts.gstatic.com/s/barriecito/v17/WWXXlj-CbBOSLY2QTuY_GdwoYibNwMR2ng.woff2") format("woff2")',
        unicodeRange: 'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
      },
      {
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("https://fonts.gstatic.com/s/barriecito/v17/WWXXlj-CbBOSLY2QTuY_GdIoYibNwMQ.woff2") format("woff2")',
        unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
      },

    ]
    const PicsartInstance = new Picsart({
      propertyId: '',
      containerId: 'containerId',
      apiKey: 'Your_API_KEY',
      logo: '',
      usePicsartInventory: true,
      exportFormats: ['image/png', 'replay'],
      exportType: 'blob',
      branding: {
          accents: '#eec443',
          hover: '#eed792',
          main: '#1f3b5e',
          texts: '#ffffff',
          background: '#0a1e37',
        },
      quality: 90, // for images only
      mode: 'image',
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
          'effects',
          'eraser',
          'duplicate',
          'adjust',
          'edit',
          'color',
          'gradient',
          'font',
          'border',
          'outline',
          'shadow',
          'crop',
          'flip_rotate',
          'position',
          'tool_removeBG'
        ],
      },
      categories: {
        templates: {},
        photos: {
          thumbnailHeader: false,
        },
        text: {
          title: false,
        },
        uploads: {
          title: false,
        },
        elements: {
          smallTitle: true,
        },
        background: {
          header: false,
          tabs: ['Color']
        },
      },
    });

    PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });
    PicsartInstance.provideLabels({
      nextButton: 'Export',
    });
    PicsartInstance.onExport((output) => {
      PicsartInstance.close();
      if (output.data.imageData) downloadFile(output.data.imageData, 'image.png');
      if (output.data.replayData) {
        const blob = new Blob([output.data.replayData], { type: 'application/zip' });
        downloadFile(blob, 'replayFile.replay');
      }
    });

    PicsartInstance.open({
      selectedTool: 'templates',
      measurement: 'pixel',
      title: ''
    });

  </script>
</body>

</html>