Getting Started - HTML5/Standalone

Let’s get started!

This snippet includes the minimal code necessary to get the editor running in a simple HTML5 file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Photoeditor SDK</title>

    <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom-server.browser.production.min.js"></script>
    <script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.min.js"></script>
    <script src="https://unpkg.com/photoeditorsdk/umd/no-polyfills.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="editor" style="width: 100vw; height: 100vh;"></div>
    <script>
      PhotoEditorSDK.PhotoEditorSDKUI.init({
        container: "#editor",
        license: "",
        image:
          "https://images.unsplash.com/photo-1599713061074-9efa95376d3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80",
        assetBaseUrl: "https://unpkg.com/photoeditorsdk/assets",
      });
    </script>
  </body>
</html>

Let’s go step by step

Adding peer dependencies

PhotoEditor SDK needs the following peer dependencies:

React >= 16.8.6
React DOM >= 16.8.6
Styled Components >= 4.4

We would recommend to download these files and add them to your js folder instead of providing external links to your customers.

<script src="./js/photoeditorsdk/react.production.min.js"></script>
<script src="./js/photoeditorsdk/react-dom.production.min.js"></script>
<script src="./js/photoeditorsdk/react-dom-server.browser.production.min.js"></script>
<script src="./js/photoeditorsdk/styled-components.min.js"></script>

Adding the PhotoEditor SDK

The files for the PhotoEditor SDK can be copied from our public Github repo to your application.

umd/index.js includes all necessary polyfills to get the editor running in IE11. You must also copy no-polyfills.tsto your project as this is required by theindex.js` file.

<script src="./js/photoeditorsdk/index.js"></script>

If you want to provide your own polyfills you will only need umd/no-polyfills.js

<script src="./js/photoeditorsdk/no-polyfills.js"></script>

Initialising the PhotoEditor SDK

<body>
  <div id="editor" style="width: 100vw; height: 100vh;"></div>
  <script>
    const initEditor = async () => {
      const editor = await PhotoEditorSDK.PhotoEditorSDKUI.init({
        container: "#editor",
        license: "",
        image: "",
        assetBaseUrl: "",
      });

      // The export event will be called if the user clicks on the export button
      editor.on(PhotoEditorSDK.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.

Otherwise, you will see errors such as
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.
or
Unable to get image data from canvas because the canvas has been tainted.

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

Ready to go!

There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.