The JavaScript image editor for your website


import { UIEvent, PhotoEditorSDKUI } from 'photoeditorsdk'

PhotoEditorSDKUI.init({
  //The Container where PhotoEditorSDKUI should be rendered
  container: '#editor',
  // Please replace this with your license 
  // https://account.photoeditorsdk.com/dashboard/subscriptions
  license: '{"owner":"Img.ly GmbH","version":"2.1", ...}'
  image: 'example.png',
}).then((editor) => {
  console.log('PhotoEditorSDK for Web is ready!')
  editor.on(UIEvent.CLOSE, () => {
    console.log('closed')
  })
})


import { PhotoEditorSDKUI } from 'photoeditorsdk';
export default {
  name: 'PhotoEditor',
  props: {
    imagePath: {
      type: String,
      required: true,
      default: ''
    }
  },
  data: () => ({
    editor: null,
  }),
  watch: {
    layout() {
      this.renderUi();
    }
  },
  created() {
  },
  methods: {
    async renderUi() {
      this.editor = await new PhotoEditorSDKUI.init({
        image: this.imagePath,
        //The Container where PhotoEditorSDKUI should be rendered
        container: this.$refs.container,
        // Please replace this with your license 
      	// https://account.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Img.ly GmbH","version":"2.1", ...}'
      });
    }
  }
};


import { PhotoEditorSDKUI, UIEvent } from 'photoeditorsdk'
const image = new Image()
image.onload = () = {
  const editor = await PhotoEditorrSDKUI.init({
    //The Container where PhotoEditorSDKUI should be rendered
    container: document.getElementById('container'),
    image: image,
    engine:{
      // Please replace this with your license 
      // https://account.photoeditorsdk.com/dashboard/subscriptions
      license: '{"owner":"Img.ly GmbH","version":"2.1", ...}'
    }
  })
  editor.on(UIEvent.EDITOR_READY, () => {
    console.log('PhotoEditorSDK for Web is ready"')
  }
})
image.src = './example.jpg'


@Component({
  selector: "app-photo-editor",
  templateUrl: "./photo-editor.component.html",
})
export class PhotoEditorComponent implements AfterViewInit {
  constructor() {}

  @Input() src: string;
  @ViewChild("psdkContainer", { static: false }) container;

  editor;

  ngAfterViewInit() {
    this.instantiateEditor();
  }

  async instantiateEditor() {
    try {
      this.editor = await PhotoEditorSDKUI.init({
        // Please replace this with your license 
      	// https://account.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Img.ly GmbH","version":"2.1", ...}',
        //The Container where PhotoEditorSDKUI should be rendered
        container: this.container.nativeElement,
        image: this.src,
        assetBaseUrl: "/assets/photoeditorsdk",
      });
    } catch (error) {
      console.log(error);
    }
  }
}


import { PhotoEditorSDKUI } from 'photoeditorsdk'

window.onload = function () {
    var container = document.getElementById('pesdk')
    var editor = new PhotoEditorSDKUI({
      // Please replace this with your license 
      // https://account.photoeditorsdk.com/dashboard/subscriptions
      license: '{"owner":"Img.ly GmbH","version":"2.1", ...}',
      //The Container where PhotoEditorSDKUI should be rendered
      container: container,
      image: './example.jpg'
    })
}