License & Export Getty Images

In most cases searching for and selecting an image to license is just the first step in your app's workflow.

By default, the Getty Images Library SDK downloads the licensed image. To change this behavior and to pass on a URL to some other part of your application you can use the onConfirm config option.

Use onExportLicenseImage if you want to download the image and load it into the image editor, but not as a file to the user's browser. The function returns the URL to the image for further processing within your application

Use onLicense if you want to license the image and return the URL, but not download it.

Calling onClick will trigger the export event that can be used to save a serialization. The serialization can be used to apply the edit operations performed by a user to other versions of the licensed image.

To prevent automatic download of the image on export, configure the image export options setting enableDownload to false.


import React, { useEffect, useState } from 'react';
import {
  PhotoEditorSDKUI,
  EditorApi,
  UIEvent,
  DisplaySizeName,
  ImageSize,
  ImageFormat,
  ExportFormat,
} from '@pesdk/getty-images-integration';

export const Export: React.FC = () => {
  const [editor, setEditor] = useState<EditorApi>();
  useEffect(() => {
    const initEditor = async () => {
      const editor = await PhotoEditorSDKUI.init({
        gettyAPIKey: import.meta.env.VITE_APP_API_KEY,
        gettyTokenURL: 'http://localhost:9191/token',
        displaySize: DisplaySizeName.Comp,
        imageSize: ImageSize.Large,
        onConfirm: async (onExportLicensedImage, image, onLicense, onClick) => {
          // default
          onExportLicensedImage();
          // use onExportLicenseImage if you want to download the image and load it into the image editor
          // this function will return the URL for the licensed image
          // const uri = await onExportLicensedImage();

          // use onLicense if you want to license the image and return the URL
          // this function will not load the image into the editor
          // const uri = await onLicense();

          // calling onClick will trigger the export event that can be used to save a serialization
          // onClick();
        },
        export: {
          image: {
            enableDownload: false,
            format: ImageFormat.JPEG,
            exportType: ExportFormat.DATA_URL,
          },
        },
      });
      setEditor(editor);
    };
    initEditor();
  }, []);

  useEffect(() => {
    if (!editor) return;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    editor.on(UIEvent.EXPORT, async img => {
      alert('Image exported!');
    });
  }, [editor]);

  return <div className="editor" />;
};