Skip to main content
PESDK/Web/Guides/Getty Images Library SDK/Integration

Getty Images Library SDK Getting Started - Vanilla JS

Getting started integrating the Getty Images Library SDK

Let's get started!#

This snippet includes the minimal code necessary to get the Getty Images Library SDK running in a simple web file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PE.SDK Getty Images</title>
    <script src="https://cdn.img.ly/packages/imgly/@pesdk/getty-images-integration/latest/dist/getty-images.umd.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div
      id="editor"
      style="width: 100vw; height: 100vh; position: relative"
    ></div>
    <script>
      IntegrationGettyImages.PhotoEditorSDKUI.init({
        gettyAPIKey: "",
        gettyTokenURL: `${window.location.href}/token`,
        container: "#editor",
        assetBaseUrl:
          "https://cdn.img.ly/packages/imgly/photoeditorsdk/5.19.0/assets",
      });
    </script>
  </body>
</html>

Adding the Getty Images Library SDK#

You can either copy the files for the Getty Images Library SDK from our public GitHub repo to your application

<script src="./js/getty-images.umd.js"></script>

or use them directly from our CDN.

<script src="https://cdn.img.ly/packages/imgly/@pesdk/getty-images-integration/1.0.0/dist/getty-images.umd.js"></script>

The UMD version of the Getty Images Library SDK comes with all peer dependencies included. This means that you can't use this version if you already load React or ReactDOM into your application. The ES version does not bundle all peer dependencies and you can learn how to integrate it in the React example.

Initialising the Getty Images Library SDK#

<body>
  <div id="editor" style="width: 100vw; height: 100vh;"></div>
  <script>
    const initEditor = async () => {
      IntegrationGettyImages.PhotoEditorSDKUI.init({
        gettyAPIKey: "",
        gettyTokenURL: `${window.location.href}/token`,
        container: "#editor",
        assetBaseUrl: "",
      });


      // The export event will be called if the user clicks on the export button
      editor.on(
        IntegrationGettyImages.PhotoEditorSDKUI.UIEvent.EXPORT,
        async (image) => {
          // handle the returned image here
        }
      );
    };


    initEditor();
  </script>
</body>

Providing the assets#

The assets folder can be copied from the public GitHub repo to your project. Afterwards you need to provide the assets path to assetBaseUrl e.g.: assetBaseUrl: "assets/photoeditor".

The assetBaseUrl will also accept an external link and you are free to provide the assets from an AWS bucket or your own server.

CORS#

If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.

Please follow the instructions on how to properly configure CORS here.

Serving OAuth Token for Getty's API#

In order to authenticate with the Getty Images API you need to implement an Oauth flow that relies on secure machine-to-machine communication. Consult this section of the guide for an example.

Ready to go!#

There you have it. Getty Images Library SDK for web is ready to use. Refer to the configuration documentaion for more configuration options.