Photo Editing with Picsart Create Editor

An example showing how the SDK can be configured to be used as photo or images editor.

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>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>

Updated 4 days ago