Getting Started

A quick guide on how to easily get started with the PhotoEditor SDK for HTML5. Your kick-off to delight your users with top-notch editing capabilities.

Integration Tutorial#

Integrating our editor into your web application is easy as pie. However, if you can't wait to see the editor in action you can find a working demo integration here.

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

Note: Since we're working with the latest web technologies, all code samples are using the ECMAScript 6 standard. If you're using an older ECMAScript / JavaScript standard, please use Babel to compile the examples to ES5.

What you need#

First, download the latest release from our public GitHub repository and extract it. Afterwards, you will be left with the following folder structure


├── assets
│   ├── brushes
│   ├── filters
│   ├── fonts
│   ├── frames
│   ├── overlays
│   ├── stickers
│   └── ui
├── css
└── js
    └── vendor

The package contains three folders that you need to integrate to your project.

assets folder: It contains all assets required for the PhotoEditor, this includes for example assets for frames, stickers and the ui.
css folder: It contains all stylesheets for the PhotoEditor SDK UI.
js folder: It contains all javascript sources of the PhotoEditor and its dependencies.

Integration#

Copy the folders assets, css and js into your project. Then include the SDK and the UI JavaScript files as well as the CSS files inside your <head> tag:

DesktopUI

ReactUI


<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
</head>

Now, create a <div> tag as a container for the editor. The editor will adapt its size according to the dimensions of the container. For the sake of simplicity, specify the dimensions using inline styles:

HTML


<div id="editor" style="width: 100vw; height: 100vh;"></div>

Finally, in order to initialize the editor, instantiate the UI using JavaScript. Add the following code right below our containing <div> element:

DesktopUI

ReactUI


<script>
  window.onload = function () {
    var image = new Image();
    image.onload = function () {
      var container = document.getElementById('editor');
      var editor = new PhotoEditorSDK.UI.DesktopUI({
        container: container,
        // Please replace this with your license: https://img.ly/dashboard
        license: '{"owner":"Imgly Inc.","version":"2.4", ...}',
        editor: {
          image: image,
        },
        assets: {
          // This should be the absolute path to your `assets` directory
          baseUrl: '/assets',
        },
      });
    };
    // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
    image.src = './example.jpg';
  };
</script>

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

This was all that is necessary to get the PhotoEditor SDK up and running. For simplicity here is the whole source code of the html file:

DesktopUI

ReactUI


<!DOCTYPE html>
<html>
  <head>
    <!-- React Dependencies for the SDK UI -->
    <script src="js/vendor/react.production.min.js"></script>
    <script src="js/vendor/react-dom.production.min.js"></script>
    <!-- PhotoEditor SDK-->
    <script src="js/PhotoEditorSDK.min.js"></script>
    <!-- PhotoEditor SDK UI -->
    <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
    <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
  </head>

  <body>
    <div id="editor" style="width: 100vw; height: 100vh;"></div>
    <script>
      window.onload = function () {
        var image = new Image();
        image.onload = function () {
          var container = document.getElementById('editor');
          var editor = new PhotoEditorSDK.UI.DesktopUI({
            container: container,
            // Please replace this with your license: https://img.ly/dashboard
            license: '{"owner":"Imgly Inc.","version":"2.4", ...}',
            editor: {
              image: image,
            },
            assets: {
              // This should be the absolute path to your `assets` directory
              baseUrl: '/assets',
            },
          });
        };
        // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
        image.src = './example.jpg';
      };
    </script>
  </body>
</html>

Launch your favorite webserver and enjoy our editor. If you don't know which webserver to use, give `python -m SimpleHTTPServer 8000`` a try.

In any case, you can find a working demo integration here.

Check out following guides for more examples.

Questions ?#

This guide shows you how to integrate our editor into your own application. If you run into any error messages or other problems during this process or should you have further questions about the editor itself, then please take a look at our FAQ page, which offers answers to the most common questions and errors you might run into.

If the FAQ page doesn't answer your questions, please contact us and we will be more than happy to help!