Getting Started - Vue JS

Let’s get started!

We will be using vue cli for simplicity.

Create a project

Start a new project by folowing the vue cli prompts.

vue create my-app
cd my-app
npm run serve

Then open http://localhost:8080/ to see your app.

Installing peer dependencies

PhotoEditor SDK needs following peer dependencies:

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

Run npm install --save react react-dom styled-components to include them in the project.

Installing PhotoEditor SDK

Run npm install --save photoeditorsdk.
Copy the assets folder from node_modules/photoeditorsdk to public.

Creating an Editor component

In src/components create the PhotoEditor.vue file.

<template>
  <div ref="container" style="width: 100vw; height: 100vh;" />
</template>

<script>
  import React from "react";
  import ReactDom from "react-dom";
  import Vue from "vue";
  import { PhotoEditorSDKUI, UIEvent } from "photoeditorsdk";

  window.React = window.React || React;
  window.ReactDom = window.ReactDom || ReactDom;

  const supportedUis = ["advanced", "basic"];
  const supportedThemes = ["dark", "light"];

  export default {
    name: "PhotoEditor",
    props: {
      layout: {
        type: String,
        default: "advanced",
        validator: (value) => supportedUis.some((type) => type === value),
      },
      theme: {
        type: String,
        default: "dark",
        validator: (value) => supportedThemes.some((type) => type === value),
      },
      license: {
        type: String,
        required: true,
        default: "",
      },
      imagePath: {
        type: String,
        required: true,
        default: "",
      },
      assetPath: {
        type: String,
        default: "assets",
      },
      options: {
        type: Object,
      },
    },
    data: () => ({
      editor: null,
      image: null,
    }),
    watch: {
      layout() {
        this.renderUi();
      },
    },
    created() {
      this.image = new Image();
      if (this.imagePath) {
        this.image.onload = this.renderUi.bind(this);
        this.image.src = this.imagePath;
      }
    },
    methods: {
      async renderUi() {
        const editor = await PhotoEditorSDKUI.init({
          ...this.options,
          image: this.image,
          layout: this.layout,
          theme: this.theme,
          container: this.$refs.container,
          license: this.license,
          assetBaseUrl: this.assetPath,
        });

        this.editor = editor;
        /**
         * Save the editor instance as a vue instance property
         * so you are able to access it from anywhere with
         * `this.$pesdk` and listen on events.
         */
        Vue.prototype.$pesdk = this.editor;
        this.$pesdk.on(UIEvent.EXPORT, (result) => {
          // eslint-disable-next-line
          console.log(result);
        });
      },
    },
  };
</script>

Add the Component to the App.vue file.

<template>
  <div id="app">
    <PhotoEditor :layout="layout" :license="license" :image-path="path" />
  </div>
</template>

<script>
  import PhotoEditor from "./components/PhotoEditor.vue";

  const myLicense = ""; // replace this with the content of your license file

  export default {
    name: "App",
    components: {
      PhotoEditor,
    },
    data: () => ({
      layout: "advanced",
      license: myLicense,
      path: "example.jpg",
    }),
  };
</script>

<style>
  body {
    margin: 0;
  }
</style>

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.