How to access export method of photoeditorsdk to get the image url?

Question

I am not able to get the updated image url from photoedior sdk.

this is for integrating photoeditor sdk with angular

let templateStr: string = `
  <ngui-react
    [reactComponent]="reactComponent"
    [reactProps]="reactProps">
  </ngui-react>
`;

export class PhotoEditorSDKDesktopUIComponent {
    reactComponent: React.Component;
    @Input() imageUrl;
    reactProps: any;
    @Input() license: string = license;
    constructor() {}

  ngOnChanges(changes): void {
    let firstNumber, secondNumber;
    const { derivativeUrl, sequence, name, code } = this.imageUrl;
    if (code) {
      [firstNumber, secondNumber] = code && code.split('X');
    }
    const image = new Image();
    image.crossOrigin = 'Anonymous';

    const defaultProps = {
      // license: license,
      assets: {
        baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton
      },
      style: {
        width: 1024,
        height: 576
      },
      editor: {
        enableSave: true,
        enableExport: true,
        forceCrop: false,
        image: image,
        export: {
          fileBasename: 'pesdk-doc',
          format: 'image/jpeg',
          type: 'data-url',
          download: false
        },
        save: {
          fileBasename: 'pesdk-doc',
          download: false,
          format: 'text/json',
          image: true
        },
        controlsOptions: {
          transform: {
            categories: [
              {
                identifier: name,
                defaultName: code,
                ratios: [
                  {
                    identifier: name, 
                    defaultName: name, 
                    ratio: Number(firstNumber) / Number(secondNumber)
                  }
                ]
              }
            ]
          },
          replaceCategories: false
        }
      }
    };

    const licenseProps = {
      license: this.license
    };
    defaultProps.editor.image['src'] = s3Prefix + derivativeUrl;
    this.reactComponent = PhotoEditorDesktopUI.ReactComponent; 
    this.reactProps = { ...defaultProps, ...licenseProps };
  }
}

I am not sure where to write the export function to get the response from photoeditorsdk? Any kind of help will be great, thanks! not event able to access the save method method as well not sure where things are getting wrong.

Answer 1

Try adding the following to defaultProps:

ref: component => {
  this.editor = component.ui;
}

(Where editor is defined as editor: PhotoEditorDesktopUI)

Now you can export like this:

this.editor.export(false).then(data => {
  // do something with the data
});