This tutorial is going to walk you through the integration process of the PhotoEditor SDK into your website. You’ll learn how to setup the HTML5 editor in four minutes. We created similar tutorials for iOS and Android, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

Transcript

In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK for HTML5 into your website. We’re going to use Visual Studio Code and the PhotoEditor SDK’s documentation. So let’s get to it.

We unzip the file and copy the assets, css and js folder. Those contain all the elements our editor needs to run properly. We paste the folders into our project folder. For this demo, we want to open a sample image with the editor, so we copy that into our folder as well.

Here, we already opened our project’s folder with Visual Studio Code. Next, we’re going to create an HTML file that we’re going to use to build our site. We copy this code for the <head> section and paste it into our index.html file.

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

Here’s where we link to the JavaScript files from our js folder. Please note that if you store the folder somewhere else, you have to adjust these paths accordingly. Also, this is where the css file for our desktop UI is loaded.

Next, we’re going to add a <body> to our site. Then we’ll need a <div> where our editor is going to be displayed. For that, we can simply copy the snippet from the documentation.

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

The <div>’s ID is set to editor so we can address it via JavaScript. Now, we copy this JavaScript snippet from the documentation so that the editor loads properly.

<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://www.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        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>

We have already prepared our license file here. It is important to copy the entire content of the license file and paste it after license. Also, it is important to insert the license as a string and not as a JavaScript object.

Please make sure that under baseUrl you have entered the correct path to your assets folder.

Under image.src we load our image. Please note that if you don’t load the image locally but from another source, say a server like an AWS S3 bucket, you have to setup CORS properly. We dedicated a whole section in our documentation to this issue, so make sure to check that out. However, as we’re going to load the image locally, we don’t have to mind that line.

Finally, it is important that we create the editor after the image is loaded so that we can pass the image to the editor.

Alright, we’re set. Now we can test everything by running a server. We’ll go with the SimpleHTTPServer.

As we can see, everything runs properly. Thanks a lot for watching and see you next time.

That was all that is necessary to get the PhotoEditor SDK up and running. For your convenience, here’s the whole source code of the HTML file:

<!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://www.photoeditorsdk.com/dashboard/subscriptions
            license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
            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>

Thanks for reading! To stay in the loop, subscribe to our Newsletter.